Textarea
Textarea
component allows users to input strings in a larger input than
TextInput
. Both interact with component state in
the same way.Basic usage
label
, placeholder
, and description
. The contents of the
textarea can be accessed from value
on the component state.tsxCopied1<Textarea2id="textInput"3label="Reason"4placeholder="Enter the reason for your request"5description="Extra context sent to the reviewers"6/>7<Divider size="md" />8<Text style={{ whiteSpace: "pre-line" }}>The reason is {textInputState.value}</Text>
Sizing
minRows
, maxRows
, and autosize
. Note that if
autosize
is false, minRows
determines the height of the component.tsxCopied1<Textarea2label="Comments"3width="48u"4description="Enter any additional feedback"5autosize6minRows={3}7maxRows={5}8/>
Component API
Whether textarea will grow with content until maxRows are reached.
The input's disabled state on initial render.
The input value on initial render.
Description displayed below the input.
Disables the input. Prefer to use defaultDisabled and component state.
Error text displayed below the input.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
Adds an icon to the left of the input.
The ID referenced by the global component state.
Label displayed above the input.
Maximum number of rows if autosize is set.
Number of rows, or minimum number of rows if autosize is set.
Callback when input changes when using as a controlled component. Prefer using the global component state.
Hint text displayed when the input is empty.
The input's border radius.
Adds red asterisk on the right side of label and sets required on input element
Input size.
A single function or an array of functions that validate the input value.
The value of the input when using as a controlled component. Prefer using defaultValue and the global component state.
Input appearance.
State API
Whether the textarea is disabled
Focuses on the textarea
Sets the disabled value of the textarea. If the disabled
value is not provided, the textarea will be disabled
Sets the value of the textarea
The string currently in the textarea