Add required prop to Checkbox. (carbon-design-system#1030)

Fixes carbon-design-system#1029.
Mattchine · Jan 22, 2022 · 201e037 · 201e037
1 parent e3902fe
commit 201e037
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -467,6 +467,7 @@ None.
 | value         | <code>let</code> | No       | <code>any</code>                          | <code>""</code>                                  | Specify the value of the checkbox                 |
 | indeterminate | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
 | skeleton      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
+| required      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required       |
 | readonly      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |
 | disabled      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the checkbox             |
 | labelText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                            |

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -763,6 +763,17 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "readonly",
           "kind": "let",

diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
@@ -24,6 +24,9 @@
   /** Set to `true` to display the skeleton state */
   export let skeleton = false;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   /** Set to `true` for the checkbox to be read-only */
   export let readonly = false;
 
@@ -87,6 +90,7 @@
       id="{id}"
       indeterminate="{indeterminate}"
       name="{name}"
+      required="{required}"
       readonly="{readonly}"
       class:bx--checkbox="{true}"
       on:change="{() => {

diff --git a/types/Checkbox/Checkbox.svelte.d.ts b/types/Checkbox/Checkbox.svelte.d.ts
@@ -32,6 +32,12 @@ export interface CheckboxProps {
    */
   skeleton?: boolean;
 
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
   /**
    * Set to `true` for the checkbox to be read-only
    * @default false