feat(checkbox): add helperText prop

Author: metonym

COMPONENT_INDEX.md

@@ -468,6 +468,7 @@ None.
 | disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the checkbox             |
 | labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                            |
 | hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text     |
+| helperText    | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                           |
 | name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Set a name for the input element                  |
 | id            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input label                     |
 
@@ -2987,6 +2988,7 @@ None.
 | name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
 | legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                                  |
 | hideLegend    | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend                |
+| helperText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the helper text                                  |
 | labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                               |
 | orientation   | No       | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons             |
 | id            | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Set an id for the container div element                  |

docs/src/COMPONENT_API.json

@@ -1031,6 +1031,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "name",
           "kind": "let",
@@ -11530,6 +11542,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "helperText",
+          "kind": "let",
+          "description": "Specify the helper text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "labelPosition",
           "kind": "let",

src/Checkbox/Checkbox.svelte

@@ -40,6 +40,9 @@
   /** Set to `true` to visually hide the label text */
   export let hideLabel = false;
 
+  /** Specify the helper text */
+  export let helperText = "";
+
   /** Set a name for the input element */
   export let name = "";
 
@@ -136,5 +139,13 @@
         </slot>
       </span>
     </label>
+    {#if helperText}
+      <div
+        class:bx--form__helper-text={true}
+        class:bx--form__helper-text--disabled={disabled}
+      >
+        {helperText}
+      </div>
+    {/if}
   </div>
 {/if}

tests/Checkbox/Checkbox.test.svelte

@@ -6,6 +6,7 @@
   export let disabled = false;
   export let hideLabel = false;
   export let labelText = "Checkbox label";
+  export let helperText = "";
 </script>
 
 <Checkbox
@@ -14,6 +15,7 @@
   {disabled}
   {hideLabel}
   {labelText}
+  {helperText}
   data-testid="checkbox"
   on:check={() => console.log("check")}
   on:click={() => console.log("click")}

tests/Checkbox/Checkbox.test.ts

@@ -440,4 +440,19 @@ describe("Checkbox", () => {
     await user.click(input);
     expect(input).toBeChecked();
   });
+
+  it("should render helper text when provided", () => {
+    render(Checkbox, { helperText: "Helper text message" });
+    const wrapper = screen.getByTestId("checkbox");
+    const helperElement = wrapper.querySelector(".bx--form__helper-text");
+    assert(helperElement);
+    expect(helperElement).toHaveTextContent("Helper text message");
+  });
+
+  it("should not render helper text by default", () => {
+    render(Checkbox);
+    const wrapper = screen.getByTestId("checkbox");
+    const helperElement = wrapper.querySelector(".bx--form__helper-text");
+    expect(helperElement).not.toBeInTheDocument();
+  });
 });

types/Checkbox/Checkbox.svelte.d.ts

@@ -64,6 +64,12 @@ type $Props = {
    */
   hideLabel?: boolean;
 
+  /**
+   * Specify the helper text
+   * @default ""
+   */
+  helperText?: string;
+
   /**
    * Set a name for the input element
    * @default ""