diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ec796bee..7d246c9c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -467,6 +467,7 @@ None. | value | let | No | any | "" | Specify the value of the checkbox | | indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| required | let | No | boolean | false | Set to `true` to mark the field as required | | readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only | | disabled | let | No | boolean | false | Set to `true` to disable the checkbox | | labelText | let | No | string | "" | Specify the label text | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index bdc49565..a2128a99 100644 --- 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 index cf609e88..224da129 100644 --- 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 index ebf67ec1..85eb0733 100644 --- 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