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 ""