Textarea
The
Textarea component allows users to input strings in a larger input than
TextInput. Both interact with component state in
the same way.Basic usage
You can set basic fields like
label, placeholder, and description. The contents of the
textarea can be accessed from value on the component state.Sizing
You can control the size of the textarea by using
minRows, maxRows, and autosize. Note that if
autosize is false, minRows determines the height of the component.Component API
| Name | Description | Default |
|---|---|---|
| id | string The ID referenced by the global component state. | |
| defaultValue | string The input value on initial render. | |
| defaultDisabled | boolean The input's disabled state on initial render. | |
| validate | ((value: string) => string | undefined) | Array<(value: string) => string | undefined> A single function or an array of functions that validate the input value. | |
| required | boolean Adds red asterisk on the right side of label and sets required on input element | false |
| onChange | (value: string) => void Callback when input changes when using as a controlled component. Prefer
using the global component state. | |
| variant | "unstyled" | "default" Input appearance. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" Input size. | |
| disabled | boolean Disables the input. Prefer to use defaultDisabled and component state. | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" The input's border radius. | |
| sx | CSSObject CSS style overrides. | |
| width | number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; } Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.
content indicates that the component should take up as much space as its content.
auto indicates that the component should take any leftover space on the row.
To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%. | content |
| offset | number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; } Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.
To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%. | |
| placeholder | string Hint text displayed when the input is empty. | |
| value | string The value of the input when using as a controlled component. Prefer
using defaultValue and the global component state. | |
| error | Component Error text displayed below the input. | |
| label | Component Label displayed above the input. | |
| description | Component Description displayed below the input. | |
| icon | Component Adds an icon to the left of the input. | |
| autosize | boolean Whether textarea will grow with content until maxRows are reached. | false |
| maxRows | number Maximum number of rows if autosize is set. | |
| minRows | number Number of rows, or minimum number of rows if autosize is set. |
State API
| Name | Description |
|---|---|
| value | string The string currently in the textarea |
| setValue | (value: string) => void Sets the value of the textarea |
| disabled | boolean Whether the textarea is disabled |
| setDisabled | (disabled?: boolean) => void Sets the disabled value of the textarea. If the `disabled` value is not provided, the textarea will be disabled |
| focus | () => void Focuses on the textarea |