Textarea
The textarea component allows users to enter and edit multi-line text.
Expand code
<Textarea label={'Textarea'} rows={1}/>The textarea and input components function similarly, with the key differences being that the textarea offers
only a single variant and does not support the decorator component.
For more usage examples, please refer to the input documentation page.
Resize
The textarea can be resized vertically, horizontally, both directions, or can be fixed without resizing.
Expand code
<Textarea label={'Textarea'} rows={5} cols={50} resize={'none'}/>Use the props rows and cols to overwrite the default width and height.
Validation
Use a combination of the error state and helpText prop to give users additional information.
Additional information about the textarea or error
Expand code
<Textarea label={'Textarea'} rows={1} cols={75} resize={'vertical'} error
helpText={'Additional information about the textarea or error'} defaultValue={'Error'}/>Props
| Name | Type | Default | Description |
|---|---|---|---|
| dark | boolean | false | Use the darkmode style |
| error | boolean | false | Toggle the error state |
| helpText | string | - | Set the help text |
| label | string | - | Set the label text |
| resize | both | vertical | horizontal | none | both | Define how the textarea can be resized |
In addition to these props the component uses the default html textarea props (e.g. rows & cols).
Last updated on