Textarea

String input component
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.
Loading view...

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.
Loading view...

Component API

NameDescriptionDefault
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 Adds red asterisk on the right side of label
variant
"unstyled" | "default"
Input appearance
size
"xs" | "sm" | "md" | "lg" | "xl"
Input size
sm
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
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
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

NameDescription
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