Textarea
Surface for accepting multi-line user input
import { Textarea } from '@ensdomains/thorin'
<Textarea label="Why are you entering $WRITE Race?" placeholder="Share your story…" />
name | type | default | description |
|---|---|---|---|
actionIcon | ReactNode | - | A replacement icon for the action button |
alwaysShowAction | boolean | false | If true, will show the action button even when there is not input |
autoCorrect | string | - | If true, the input will automatically correct words it marks as spelling errors. |
autoFocus | boolean | - | If true, the component will attempt to get focus after it is rendered. |
clearable | boolean | false | If true, will show a clear button when the input has value |
defaultValue | string | number | - | The initial value. Useful for detecting changes in value. |
description | ReactNode | - | Description text or react component. |
disabled | boolean | - | If true, prevents user interaction. |
error | ReactNode | - | Error text or a react component. |
hideLabel | boolean | - | If true, hides the label and secondary label. |
id | string | - | The id attribute of the textarea element. |
label* Required | ReactNode | - | Label text or react component |
labelSecondary | ReactNode | - | Secondary text or react component |
maxLength | number | - | The maximum number of characters allowed. |
name | string | textarea | The name attribute of the textarea element. |
placeholder | string | - | The placeholder attribute for textarea. |
readOnly | boolean | - | If true, will set the Fields component to read only mode
The readOnly attribute for textarea. |
ref | null | string | (instance: HTMLTextAreaElement | null) => void | RefObject<HTMLTextAreaElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
required | boolean | - | Adds mark to label |
reverse | boolean | - | Have label appear on the left of the form element. |
rows | number | 5 | Specifies the height of the text area in rows. |
showDot | boolean | - | If true, shows a status dot of the current state of validation |
size | "small" | "medium" | medium | The size of the textarea. |
spellCheck | false | true | "true" | "false" | - | Textarea will mark words which it thinks are misspellings. |
tabIndex | number | - | The tabindex attribute of textarea. |
validated | boolean | - | If true the value of the textarea has been validated |
value | string | number | - | The value attribute of textarea. |
width | any | - | A tokens space key value setting the width of the parent element. |
onClickAction | () => void | - | A custom handler that replaces the clear handler |
onChange | ChangeEventHandler<HTMLTextAreaElement> | - | The handler for change events. |
onBlur | FocusEventHandler<HTMLTextAreaElement> | - | The handler for blur events. |
onFocus | FocusEventHandler<HTMLTextAreaElement> | - | The handler for focus events. |