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.
tsx
Copied
1
<Textarea
2
  id="textInput"
3
  label="Reason"
4
  placeholder="Enter the reason for your request"
5
  description="Extra context sent to the reviewers"
6
/>
7
<Divider size="md" />
8
<Text style={{ whiteSpace: "pre-line" }}>The reason is {textInputState.value}</Text>

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.
tsx
Copied
1
<Textarea
2
  label="Comments"
3
  width="48u"
4
  description="Enter any additional feedback"
5
  autosize
6
  minRows={3}
7
  maxRows={5}
8
/>

Component API
autosize
optional
default: false
boolean

Whether textarea will grow with content until maxRows are reached.

defaultDisabled
optional
boolean

The input's disabled state on initial render.

defaultValue
optional
string

The input value on initial render.

description
optional
React.ReactNode

Description displayed below the input.

disabled
optional
boolean

Disables the input. Prefer to use defaultDisabled and component state.

error
optional
React.ReactNode

Error text displayed below the input.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
icon
optional
React.ReactNode

Adds an icon to the left of the input.

id
optional
string

The ID referenced by the global component state.

label
optional
React.ReactNode

Label displayed above the input.

maxRows
optional
number

Maximum number of rows if autosize is set.

minRows
optional
number

Number of rows, or minimum number of rows if autosize is set.

onChange
optional
(value: string) => void

Callback when input changes when using as a controlled component. Prefer using the global component state.

placeholder
optional
string

Hint text displayed when the input is empty.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

The input's border radius.

required
optional
default: false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Input size.

validate
optional
((value: string) => string | undefined) | Array<(value: string) => string | undefined>

A single function or an array of functions that validate the input value.

value
optional
string

The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.

variant
optional
"unstyled" | "default"

Input appearance.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.

State API
disabled
boolean

Whether the textarea is disabled

focus
() => void

Focuses on the textarea

setDisabled
(disabled?: boolean) => void

Sets the disabled value of the textarea. If the disabled value is not provided, the textarea will be disabled

setValue
(value: string) => void

Sets the value of the textarea

value
string

The string currently in the textarea

PrivacyTermsSupport