Retrieve multi-line user input.
Basic usage.
Disable interactive textarea.
Differentiate states by color.
Use filled, light, ghost or subtle to change the surface of any colored Textarea.
You can completely round the corners of any type of Textarea with the rounded property.
Capture changes in textarea.
Use hooks to capture changes.
Update component in an uncontrolled way.
Input.Textarea]| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| value | textarea value | string | - | - |
| initialValue | textarea value | string | - | - |
| placeholder | placeholder | string | - | - |
| type | current type | TextareaTypes | TextareaTypes | default |
| readOnly | native attr | boolean | - | false |
| disabled | disable input | boolean | - | false |
| rounded | round corners | boolean | - | false |
| filled | filled variant | boolean | - | false |
| light | light variant | boolean | - | false |
| ghost | outline variant | boolean | - | false |
| subtle | subtle variant | boolean | - | false |
| onChange | change event | (e: React.ChangeEvent) => void | - | - |
| resize | CSS attribute | CSSResize | CSSResize | none |
| ... | native props | TextareaHTMLAttributes | 'form', 'id', 'className', ... | - |
type useInput = (initialValue: string) => {
state: string
setState: Dispatch<SetStateAction<string>>
currentRef: MutableRefObject<string>
reset: () => void
bindings: {
value: string
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}
}
type TextareaTypes =
'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'
type CSSResize =
'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'