diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index b952e6f7..f43b78fa 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -4110,6 +4110,7 @@ None. | rows | let | No | number | 4 | Specify the number of rows | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the input | +| readonly | let | No | boolean | false | Set to `true` to use the read-only variant | | helperText | let | No | string | "" | Specify the helper text | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 7a6cc3d0..9baede23 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11386,6 +11386,17 @@ "constant": false, "reactive": false }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` to use the read-only variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, { "name": "helperText", "kind": "let", diff --git a/src/TextArea/TextArea.svelte b/src/TextArea/TextArea.svelte index 52c84417..2fc894c3 100644 --- a/src/TextArea/TextArea.svelte +++ b/src/TextArea/TextArea.svelte @@ -17,6 +17,9 @@ /** Set to `true` to disable the input */ export let disabled = false; + /** Set to `true` to use the read-only variant */ + export let readonly = false; + /** Specify the helper text */ export let helperText = ""; @@ -87,11 +90,11 @@ rows="{rows}" value="{value ?? ''}" placeholder="{placeholder}" + readonly="{readonly}" class:bx--text-area="{true}" class:bx--text-area--light="{light}" class:bx--text-area--invalid="{invalid}" {...$$restProps} - readonly="{$$restProps.readonly === true ? true : undefined}" on:change on:input on:input="{({ target }) => { diff --git a/types/TextArea/TextArea.svelte.d.ts b/types/TextArea/TextArea.svelte.d.ts index 3f59c35b..a649eb52 100644 --- a/types/TextArea/TextArea.svelte.d.ts +++ b/types/TextArea/TextArea.svelte.d.ts @@ -39,6 +39,12 @@ export interface TextAreaProps */ disabled?: boolean; + /** + * Set to `true` to use the read-only variant + * @default false + */ + readonly?: boolean; + /** * Specify the helper text * @default ""