Input fields
Input fields are where users enter and edit text. It is usually part of the form components.
Textarea Input
State
Component props
| Name | Default value | Type | Is required? | Description |
|---|---|---|---|---|
label | string | Yes | Human-readable label | |
hideLabel | boolean | No | Is the label hidden? (Usually false) | |
name | string | No | Input name | |
helperText | string | No | Informative text to render below input | |
size | "small" | "medium" | "large" | No | Size variant | |
errorText | string | No | Error text relevant to input | |
className | string | No | CSS class | |
orientation | "vertical" | "horizontal" | No | Orientation of label relative to input | |
isDisabled | boolean | No | Is input disabled? | |
isReadonly | boolean | No | Is input read-only? | |
isRequired | boolean | No | Is input required? | |
placeholder | string | No | Placeholder for input | |
labelColumnStart | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | No | Label column's beginning (horizontal orientation only) | |
labelColumnEnd | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | No | Label column's ending (horizontal orientation only) | |
inputColumnStart | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | No | Input column's beginning (horizontal orientation only) | |
inputColumnEnd | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | No | Input column's ending (horizontal orientation only) | |
id | string | No | ID of input | |
hasMinimumWidth | boolean | No | Assigns a min-width to the input when true | |
testId | string | No | ID for automated testing | |
backgroundStyle | "transparent" | "filled" | No | Set the background style for an input | |
onChange | ChangeEventHandler<HTMLTextAreaElement> | No | Change handler | |
value | string | No | Input value | |
rows | number | No | Textarea's rows (height) |