CodexTextArea
Multi-line text input that allows manual resizing.
This form element is useful when you want to create a sizeable amount of free-form text, for example comments, reviews, feedback, or short essay responses.
v-model is used to track the current value of the textarea. See the events docs for details on emitted events and their properties.
Attributes passed to textarea
This component will pass any HTML attributes applied to it, except for CSS class, to the <textarea> element within the component.
Demos
Configurable
| Name | Value |
|---|---|
| Props | |
status | |
autosize | |
startIcon | |
endIcon | |
placeholder | |
disabled | |
readonly | |
rows | |
| View | |
Reading direction | |
Note: For icon properties, the relevant icon also needs to be imported from the @wikimedia/codex-icons package. See the usage documentation for more information. | |
Default
The TextArea component uses v-model to two-way bind the reactive reference to the value of <textarea>. The reactive reference will automatically update when the value changes in the <textarea>. The value updates due to an emitted input event.
By default, the initial value of the autosize prop is false. When autosize is false, the textarea will display a grabber/resize tool and a scrollbar to view the overflow content. The <textarea> can be manually resized vertically to increase height of the element.
Note: The initial min-height of the <textarea> is set to 64px.
Browser Support Warning
While our design system strives to provide a consistent experience across different platforms and browsers, it's important to be aware that the vertical resizing feature will not be available on iOS devices, including iPhones and iPads. This limitation is due to the default behavior of iOS Safari.
With placeholder
We passed in a native attribute, placeholder, to hint to users what to enter into the control.
Note: Placeholders are not a substitute for a proper <label> element tied to the control.
With rows
This example demonstrates how to pass in the native attribute, rows, to the <textarea>.
The rows attribute takes a positive number which represents the number of text lines to display in the control.
With autosize
When the autosize prop is set to true, the TextArea automatically grows with the height of the content inside <textarea>.
The grabber/resize tool is not displayed when autosize is set to true.
With icons
TextArea can pass in a start icon and end icon as props. This example shows how to add icons to the component. Also see Icon.
With disabled
You can disable the component by adding the disabled attribute.
When <textarea> is disabled, the user cannot interact with the control. Users cannot click or select in the control and the form cannot be submitted.
With readonly
You can make the component readonly by adding the readonly attribute.
When <textarea> is readonly, the user cannot modify the value of the control. Some key differences between disabled and readonly is that readonly does not prevent users from selecting and clicking in the form. Users can highlight and copy content in readonly. Readonly is tabbable and the form can be submitted.
One example usage of readonly textarea is when you want to prevent a user from typing into the textarea until a condition is met like selecting a a checkbox. In this situation, when the condition is met we can use JavaScript to remove the readonly to make the textarea editable.
Form field
A TextArea can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.
Usage
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
modelValue | Current value of the textarea. Provided by v-model binding in the parent component. | string | - | '' |
status | status attribute of the textarea. | ValidationStatusType | 'default', 'error' | 'default' |
disabled | Whether the textarea is disabled. | boolean | - | false |
autosize | Describes whether the textarea grows vertically to show all text. When autosize is true, the textarea automatically grows in height (vertically). The height of the textarea expands while the user types in the textarea. The content inside the textarea is visible and there's no scroll. | boolean | true, false | false |
startIcon | An icon at the start of the textarea element. Similar to a ::before pseudo-element. | Icon|undefined | - | undefined |
endIcon | An icon at the end of the textarea element. Similar to an ::after pseudo-element. | Icon|undefined | - | undefined |
Events
| Event name | Properties | Description |
|---|---|---|
update:modelValue | modelValue string - The new model value | When the textarea value changes. |