checked property for hy-checkbox

src/components.d.ts

@@ -221,6 +221,10 @@ export namespace Components {
     variant: ButtonVariants;
   }
   interface HyCheckbox {
+    /**
+     * Checked attribute
+     */
+    checkboxChecked: boolean;
     /**
      * Unique id for checkbox element
      */
@@ -1500,6 +1504,10 @@ declare namespace LocalJSX {
     variant?: ButtonVariants;
   }
   interface HyCheckbox {
+    /**
+     * Checked attribute
+     */
+    checkboxChecked?: boolean;
     /**
      * Unique id for checkbox element
      */

src/components/hy-checkbox/hy-checkbox.tsx

@@ -19,6 +19,10 @@ export class HyCheckbox {
    * Label for input to describe
    */
   @Prop() checkboxLabel: string;
+  /**
+   * Checked attribute
+   */
+  @Prop() checkboxChecked: boolean = false;
   /**
    * Variant to deifne what style of checkbox to use
    */
@@ -32,6 +36,7 @@ export class HyCheckbox {
             <input
               type="checkbox"
               class="hy-checkbox--button__checkbox"
+              checked={this.checkboxChecked}
               id={`${this.checkboxId}`}
               value={`${this.checkboxValue}`}
             />
@@ -50,6 +55,7 @@ export class HyCheckbox {
             <input
               type="checkbox"
               class="hy-checkbox__checkbox"
+              checked={this.checkboxChecked}
               id={`${this.checkboxId}`}
               value={`${this.checkboxValue}`}
             />

src/components/hy-checkbox/readme.md

@@ -4,12 +4,13 @@
 
 ## Properties
 
-| Property        | Attribute        | Description                                     | Type                                                  | Default                    |
-| --------------- | ---------------- | ----------------------------------------------- | ----------------------------------------------------- | -------------------------- |
-| `checkboxId`    | `checkbox-id`    | Unique id for checkbox element                  | `number \| string`                                    | `undefined`                |
-| `checkboxLabel` | `checkbox-label` | Label for input to describe                     | `string`                                              | `undefined`                |
-| `checkboxValue` | `checkbox-value` | Value for input element                         | `number \| string`                                    | `undefined`                |
-| `variant`       | `variant`        | Variant to deifne what style of checkbox to use | `CheckboxVariants.button \| CheckboxVariants.default` | `CheckboxVariants.default` |
+| Property          | Attribute          | Description                                     | Type                                                  | Default                    |
+| ----------------- | ------------------ | ----------------------------------------------- | ----------------------------------------------------- | -------------------------- |
+| `checkboxChecked` | `checkbox-checked` | Checked attribute                               | `boolean`                                             | `false`                    |
+| `checkboxId`      | `checkbox-id`      | Unique id for checkbox element                  | `number \| string`                                    | `undefined`                |
+| `checkboxLabel`   | `checkbox-label`   | Label for input to describe                     | `string`                                              | `undefined`                |
+| `checkboxValue`   | `checkbox-value`   | Value for input element                         | `number \| string`                                    | `undefined`                |
+| `variant`         | `variant`          | Variant to deifne what style of checkbox to use | `CheckboxVariants.button \| CheckboxVariants.default` | `CheckboxVariants.default` |
 
 ## Dependencies
 

src/index.html

@@ -408,17 +408,29 @@ Do you want to shape the future world and understand how the universe is built u
         </hy-paragraph-text>
 
         <hy-box pt="2" pb="2" align="center">
-          <hy-checkbox checkbox-id="1" checkbox-value="checkbox_1" checkbox-label="Introduction course"></hy-checkbox>
-          <hy-checkbox checkbox-id="2" checkbox-value="checkbox_2" checkbox-label="Open online course"></hy-checkbox>
+          <hy-checkbox
+            checkbox-id="1"
+            checkbox-value="checkbox_1"
+            checkbox-label="Introduction course"
+            checkbox-checked="true"
+          ></hy-checkbox>
+          <hy-checkbox
+            checkbox-id="2"
+            checkbox-value="checkbox_2"
+            checkbox-label="Open online course"
+            checkbox-checked="false"
+          ></hy-checkbox>
           <hy-checkbox checkbox-id="3" checkbox-value="checkbox_3" checkbox-label="Flexible start"></hy-checkbox>
           <hy-checkbox
             checkbox-id="4"
+            checkbox-checked="true"
             checkbox-value="checkbox_4"
             checkbox-label="Introduction course long text"
           ></hy-checkbox>
           <hy-checkbox
             checkbox-id="5"
             checkbox-value="checkbox_5"
+            checkbox-checked="true"
             checkbox-label="Open online course very long text"
           ></hy-checkbox>
           <hy-checkbox
@@ -432,12 +444,14 @@ Do you want to shape the future world and understand how the universe is built u
             variant="button"
             checkbox-id="3"
             checkbox-value="checkbox_3"
+            checkbox-checked="true"
             checkbox-label="Web pages (204)"
           ></hy-checkbox>
           <hy-checkbox
             variant="button"
             checkbox-id="4"
             checkbox-value="checkbox_4"
+            checkbox-checked="false"
             checkbox-label="People (89)"
           ></hy-checkbox>
           <hy-checkbox