Add new theme to checkbox

- add features for ionic theme of checkbox;

core/api.txt

@@ -321,6 +321,9 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false
+ion-checkbox,prop,required,boolean,false,false,false
+ion-checkbox,prop,shape,"rectangular" | "soft" | undefined,'soft',false,true
+ion-checkbox,prop,size,"default" | "small" | undefined,'default',false,true
 ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true
@@ -338,6 +341,7 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
+ion-checkbox,part,focus-ring
 ion-checkbox,part,label
 ion-checkbox,part,mark
 

core/src/components.d.ts

@@ -724,6 +724,18 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * If `true`, the checkbox will be presented with an error style when it is unchecked.
+         */
+        "required": boolean;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners.
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
+         */
+        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5926,6 +5938,18 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * If `true`, the checkbox will be presented with an error style when it is unchecked.
+         */
+        "required"?: boolean;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners.
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding or to `"default"` for a checkbox with the default height and padding.
+         */
+        "size"?: 'small' | 'default';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/checkbox/checkbox.ionic.scss

@@ -0,0 +1,166 @@
+@import "./checkbox";
+@import "./checkbox.ionic.vars";
+
+// ionic Checkbox
+// --------------------------------------------------
+
+:host {
+  // Border
+  --border-radius: calc(var(--size) * .125);
+  --border-width: #{$checkbox-ionic-icon-border-width};
+  --border-style: #{$checkbox-ionic-icon-border-style};
+  --border-color: #{$checkbox-ionic-icon-border-color-off};
+  --checkmark-width: 3;
+  --padding-top: #{$checkbox-ionic-padding-top};
+  --padding-bottom: #{$checkbox-ionic-padding-bottom};
+
+  // Background
+  --checkbox-background: #{$checkbox-ionic-icon-background-color-off};
+
+  // Transition
+  --transition: #{background $checkbox-ionic-transition-duration $checkbox-ionic-transition-easing};
+
+  // Size
+  --size: #{$checkbox-ionic-icon-size};
+  // add to existing selector
+
+  // margin is required to make room for outline on focus, otherwise the outline may get cut off
+  @include margin($checkbox-ionic-outline-width);  
+  @include padding(--padding-top, null, --padding-bottom, null);
+
+  // Target area
+  &::after {
+    @include position(50%, 0, null, 0);
+
+    position: absolute;
+
+    height: 100%;
+    min-height: 48px;
+
+    transform: translateY(-50%);
+
+    content: "";
+
+    cursor: pointer;
+
+    z-index: 1;
+  }
+
+  .native-wrapper{
+    position: relative;
+  }
+}
+
+// Ionic Design Checkbox Sizes
+// --------------------------------------------------
+:host(.checkbox-small) {
+  --padding-top: #{$checkbox-ionic-small-padding-top};
+  --padding-bottom: #{$checkbox-ionic-small-padding-bottom};
+
+   // Size
+   --size: #{$checkbox-ionic-small-icon-size};
+}
+
+// Ionic Design Checkbox Shapes
+// --------------------------------------------------
+:host(.checkbox-rectangular) {
+  --border-radius: #{$checkbox-ionic-rectangular-border};
+}
+
+// Ionic Design Checkbox Disabled
+// --------------------------------------------------
+// disabled, indeterminate checkbox
+:host(.checkbox-disabled.checkbox-indeterminate) .checkbox-icon {
+  border-width: 0;
+
+  background-color: #74aafc;
+}
+
+// disabled, unchecked checkbox
+:host(.checkbox-disabled) .checkbox-icon {
+  border-color: #c9c9c9;
+
+  background-color: #f5f5f5;
+}
+// disabled, checked checkbox
+:host(.checkbox-disabled.checkbox-checked) .checkbox-icon {
+  border-width: 0;
+
+  background-color: #A8C8F8;
+}
+
+// Ionic Design Checkbox Required State
+// --------------------------------------------------
+// Unhecked checkbox with `required` property set to true
+:host(.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
+  .checkbox-icon {
+    border-color: #f72c2c;
+  }
+}
+
+// Focused: Unchecked checkbox with `required` property set to true
+:host(.ion-focusable.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) .checkbox-icon {
+  outline-color: #ffafaf;
+}
+
+// Ionic Design Checkbox Focus Ring
+// --------------------------------------------------
+:host(.ion-focused:not(.checkbox-disabled)) .focus-ring {
+  @include position(-4px, -4px, -4px, -4px);
+  position: absolute;
+
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+
+  transition: border-color 0.3s;
+
+  border: 2px solid $checkbox-ionic-focus-ring-color;
+
+  /* stylelint-disable-next-line property-disallowed-list */
+  border-radius: var(--border-radius);
+
+  content: "";
+  box-sizing: border-box;
+}
+
+// Required state
+:host(.ion-focused.checkbox-required) .focus-ring {
+  border-color:$checkbox-ionic-focus-required-ring-color;
+}
+
+// Checkbox: Hover
+// --------------------------------------------------------
+@media (any-hover: hover) {
+:host(:hover) .checkbox-icon {
+  background-color: #ececec; // mix of 'white', '#121212', 0.08, 'rgb'
+}
+
+:host(:hover.checkbox-checked) .checkbox-icon,
+:host(:hover.checkbox-indeterminate) .checkbox-icon {
+  background-color: #1061da; // mix of '#1068eb', '#121212', 0.08, 'rgb'
+}
+
+// unchecked checkbox with `required` property set to true
+:host(:hover.checkbox-required:not(.checkbox-checked):not(.checkbox-indeterminate)) {
+  .checkbox-icon {
+    border-color: #ee2b2b;
+  }
+}
+}
+
+// Checkbox: Active
+// --------------------------------------------------------
+:host(.ion-activated) .checkbox-icon {
+  background-color: #e3e3e3; // mix of 'white', '#121212', 0.12, 'rgb'
+}
+
+:host(.ion-activated.checkbox-checked) .checkbox-icon,
+:host(.ion-activated.checkbox-indeterminate) .checkbox-icon {
+  background-color: #105ed1; // mix of '#1068eb', '#121212', 0.12, 'rgb'
+}
+
+:host(.checkbox-label-placement-start) {
+  display: flex;
+
+  justify-content: space-between;
+}

core/src/components/checkbox/checkbox.ionic.vars.scss

@@ -0,0 +1,63 @@
+@import "../../themes/ionic.globals.md";
+@import "../item/item.md.vars";
+
+// ionic Checkbox
+// --------------------------------------------------
+
+/// @prop - Background color of the checkbox icon when off
+$checkbox-ionic-icon-background-color-off:  $item-md-background !default;
+
+/// @prop - Size of the checkbox icon
+/// The icon size does not use dynamic font
+/// because it does not scale in native.
+$checkbox-ionic-icon-size: 24px !default;
+
+/// @prop - Icon size of the checkbox for the small size
+$checkbox-ionic-small-icon-size: 16px !default;
+
+/// @prop - Border width of the checkbox icon
+$checkbox-ionic-icon-border-width: 1px !default;
+
+/// @prop - Border style of the checkbox icon
+$checkbox-ionic-icon-border-style: solid !default;
+
+/// @prop - Border color of the checkbox icon when off
+$checkbox-ionic-icon-border-color-off: #9a9a9a !default;
+
+/// @prop - Outline width of the checkbox
+$checkbox-ionic-outline-width: 2px !default;
+
+/// @prop - Padding top of the checkbox for the default size
+$checkbox-ionic-padding-top: 12px !default;
+
+/// @prop - Padding bottom of the button for the default size
+$checkbox-ionic-padding-bottom: 12px !default;
+
+/// @prop - Padding top of the checkbox for the small size
+$checkbox-ionic-small-padding-top: 16px !default;
+
+/// @prop - Padding bottom of the button for the small size
+$checkbox-ionic-small-padding-bottom: 16px !default;
+
+/// @prop - Focus color of the checkbox
+$checkbox-ionic-focus-ring-color: #9ec4fd !default;
+
+/// @prop - Focus color of the required checkbox
+$checkbox-ionic-focus-required-ring-color: #FFAFAF !default;
+
+/// @prop - Transition duration of the checkbox
+$checkbox-ionic-transition-duration: 180ms !default;
+
+/// @prop - Transition easing of the checkbox
+$checkbox-ionic-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
+
+
+// Checkbox Shapes
+// -------------------------------------------------------------------------------
+
+/* Rectangular */
+/// @prop - Rectangular border radius of the checkbox
+$checkbox-ionic-rectangular-border: 0 !default;
+
+
+

core/src/components/checkbox/checkbox.tsx

@@ -24,7 +24,7 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
   styleUrls: {
     ios: 'checkbox.ios.scss',
     md: 'checkbox.md.scss',
-    ionic: 'checkbox.md.scss',
+    ionic: 'checkbox.ionic.scss',
   },
   shadow: true,
 })
@@ -98,6 +98,22 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
+  /**
+   * If `true`, the checkbox will be presented with an error style when it is unchecked.
+   */
+  @Prop() required = false;
+
+  /**
+   * Set to `"soft"` for a checkbox with more rounded corners.
+   */
+  @Prop({ reflect: true }) shape?: 'soft' | 'rectangular' = 'soft';
+
+  /**
+   * Set to `"small"` for a checkbox with less height and padding or to `"default"`
+   * for a checkbox with the default height and padding.
+   */
+  @Prop({ reflect: true }) size?: 'small' | 'default' = 'default';
+
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
@@ -181,6 +197,9 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
+      required,
+      size,
+      shape,
     } = this;
     const theme = getIonTheme(this);
 
@@ -201,6 +220,9 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
+          'checkbox-required': required,
+          [`checkbox-${size}`]: true,
+          [`checkbox-${shape}`]: true,
         })}
         onClick={this.onClick}
       >
@@ -233,6 +255,7 @@ export class Checkbox implements ComponentInterface {
             <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
               {path}
             </svg>
+            {theme === 'ionic' && <div part="focus-ring" class="focus-ring"></div>}
           </div>
         </label>
       </Host>
@@ -252,6 +275,12 @@ export class Checkbox implements ComponentInterface {
       ) : (
         <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
       );
+    } else if (theme === 'ionic') {
+      path = indeterminate ? (
+        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
+      ) : (
+        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
+      );
     }
 
     return path;

core/src/components/checkbox/test/theme-ionic/checkbox.e2e.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+class CheckboxFixture {
+  readonly page: E2EPage;
+  readonly screenshotFn?: (file: string) => string;
+
+  constructor(page: E2EPage, screenshot?: (file: string) => string) {
+    this.page = page;
+    this.screenshotFn = screenshot;
+  }
+
+  async checkScreenshot(modifier: string) {
+    const { screenshotFn } = this;
+
+    if (!screenshotFn) {
+      throw new Error(
+        'A screenshot function is required to take a screenshot. Pass one in when creating CheckboxFixture.'
+      );
+    }
+
+    const wrapper = this.page.locator('#screenshot-wrapper');
+
+    await expect(wrapper).toHaveScreenshot(screenshotFn(`${modifier}-checkbox`));
+  }
+}
+
+configs({ themes: ['ionic'], modes: ['md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('checkbox: theme ionic'), () => {
+    let checkboxFixture!: CheckboxFixture;
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/checkbox/test/theme-ionic`, config);
+      await page.setIonViewport();
+      checkboxFixture = new CheckboxFixture(page, screenshot);
+    });
+
+    test('default', async () => {
+      await checkboxFixture.checkScreenshot(`default`);
+    });
+  });
+});

core/src/components/checkbox/test/theme-ionic/index.html

@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Checkbox - Basic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+  <style>
+    ion-checkbox.checkbox-part::part(mark) {
+      transform: scale(0.5);
+      transform-origin: center;
+    }
+    ion-col{
+      border: 1px solid cadetblue;
+    }
+  </style>
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Checkbox - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div id="checkboxes">
+          <ion-title>Label Placement Default</ion-title>
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox>Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-margin-start">Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox shape="rectangular" class="ion-margin-start">Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-margin-start"> Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row> 
+              <ion-col><ion-checkbox class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>  
+              <ion-col><ion-checkbox shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox></ion-col>
+            </ion-row>
+          
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox checked>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" checked>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+         
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox disabled>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" disabled>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox required>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" required>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox class="ion-focused" required>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" class="ion-focused" required>Small Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+
+          <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox indeterminate>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" indeterminate>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox size="small" shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>  
+          </ion-grid>
+        </div>
+
+        <div id="checkboxes2">
+          <ion-title>Label Placement End</ion-title>
+          <ion-grid>
+            <ion-row>
+              <ion-col class="ion-text-center"><ion-title>Unchecked</ion-title></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col class="ion-text-center">Default</ion-col>
+              <ion-col class="ion-text-center">Small</ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end">Default</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" class="ion-margin-start">Default</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>
+              <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-margin-start">Rectangular</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-margin-start"> Rectangular</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row> 
+              <ion-col><ion-checkbox label-placement="end" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" class="ion-focused ion-margin-start">Focused</ion-checkbox></ion-col>
+            </ion-row>
+            <ion-row>  
+              <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox></ion-col>
+              <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused ion-margin-start">Rect Focus</ion-checkbox></ion-col>
+            </ion-row>
+          
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Checked</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" checked>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" checked>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" checked>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" class="ion-focused" checked>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" checked>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+         
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Disabled</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" disabled>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" disabled>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" disabled>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" class="ion-focused" disabled>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" disabled>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+
+            <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Required</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" required>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" required>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" required>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" class="ion-focused" required>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" class="ion-focused" required>Small Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" required>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>
+            </ion-grid>
+
+          <ion-grid>
+              <ion-row>
+                <ion-col class="ion-text-center"><ion-title>Indeterminate</ion-title></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col class="ion-text-center">Default</ion-col>
+                <ion-col class="ion-text-center">Small</ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" indeterminate>Default</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" indeterminate>Default</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" indeterminate>Rectangular</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" class="ion-focused" indeterminate>Focused</ion-checkbox></ion-col>
+              </ion-row>
+              <ion-row>
+                <ion-col><ion-checkbox label-placement="end" shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox></ion-col>
+                <ion-col><ion-checkbox label-placement="end" size="small" shape="rectangular" class="ion-focused" indeterminate>Rect Focus</ion-checkbox></ion-col>
+              </ion-row>  
+          </ion-grid>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

packages/angular/src/directives/proxies.ts

@@ -509,14 +509,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'required', 'shape', 'size', 'theme', 'value'],
 })
 export class IonCheckbox {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -216,6 +216,9 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'labelPlacement',
   'justify',
   'alignment',
+  'required',
+  'shape',
+  'size',
   'ionChange',
   'ionFocus',
   'ionBlur'