Add required prop to RadioButton. (#1035)

Fixes #1034.

COMPONENT_INDEX.md

@@ -3001,16 +3001,17 @@ None.
 ### Props
 
 | Prop name     | Kind             | Reactive | Type                                      | Default value                                    | Description                                         |
-| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
 | ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element        |
 | checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the radio button             |
 | value         | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio button               |
-| disabled      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | et to `true` to disable the radio button        |
+| disabled      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the radio button           |
+| required      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required         |
 | labelPosition | <code>let</code> | No       | <code>"right" &#124; "left"</code>        | <code>"right"</code>                             | Specify the label position                          |
 | labelText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                              |
 | hideLabel     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text       |
 | id            | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                     |
-| name          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the checkbox input |
+| name          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the radio button input |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -8581,7 +8581,18 @@
         {
           "name": "disabled",
           "kind": "let",
-          "description": "et to `true` to disable the radio button",
+          "description": "Set to `true` to disable the radio button",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "required",
+          "kind": "let",
+          "description": "Set to `true` to mark the field as required",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
@@ -8636,7 +8647,7 @@
         {
           "name": "name",
           "kind": "let",
-          "description": "Specify a name attribute for the checkbox input",
+          "description": "Specify a name attribute for the radio button input",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,

src/RadioButton/RadioButton.svelte

@@ -5,9 +5,12 @@
   /** Set to `true` to check the radio button */
   export let checked = false;
 
-  /** et to `true` to disable the radio button */
+  /** Set to `true` to disable the radio button */
   export let disabled = false;
 
+  /** Set to `true` to mark the field as required */
+  export let required = false;
+
   /**
    * Specify the label position
    * @type {"right" | "left"}
@@ -23,7 +26,7 @@
   /** Set an id for the input element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  /** Specify a name attribute for the checkbox input */
+  /** Specify a name attribute for the radio button input */
   export let name = "";
 
   /** Obtain a reference to the input HTML element */
@@ -56,6 +59,7 @@
     name="{name}"
     checked="{checked}"
     disabled="{disabled}"
+    required="{required}"
     value="{value}"
     class:bx--radio-button="{true}"
     on:change

types/RadioButton/RadioButton.svelte.d.ts

@@ -16,11 +16,17 @@ export interface RadioButtonProps
   checked?: boolean;
 
   /**
-   * et to `true` to disable the radio button
+   * Set to `true` to disable the radio button
    * @default false
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to mark the field as required
+   * @default false
+   */
+  required?: boolean;
+
   /**
    * Specify the label position
    * @default "right"
@@ -46,7 +52,7 @@ export interface RadioButtonProps
   id?: string;
 
   /**
-   * Specify a name attribute for the checkbox input
+   * Specify a name attribute for the radio button input
    * @default ""
    */
   name?: string;