Text Area
Allows users to enter and edit long form information.
<TextArea aria-label="description" placeholder="Enter description..." />
Usage
Label
Attach a label to the select using the label
prop.
<TextArea label="Description" />
HelperText
Add additional context as well as display error messages with the helperText
prop.
Please enter a description
<TextArea label="Description" helperText="Please enter a description" />
Controlled
A text area's state can be controlled by a parent React component by setting the value
prop and
passing a handler to the onChange
prop.
function ControlledExample() { const [value, setValue] = React.useState( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', ); return <TextArea aria-label="description" onChange={setValue} value={value} />; }
Disabled State
Set the isDisabled
prop to prevent a user from inputting text.
<TextArea aria-label="description" isDisabled />
Props
as?The root element to be rendered
children?
ReactNode
defaultValue?
string
The default value (uncontrolled).placeholder?
string
Temporary text that occupies the text input when it is empty.value?
string
The current value (controlled).onChange?
(value: string) => void
Handler that is called when the value changes.endIcon?
ReactNode
Icon displayed at the end of the text field.helperText?
ReactNode
Helper text to append to the form control input element.helperTextProps?
HTMLAttributes<HTMLElement>
Props passed to the helper text.inputRef?
RefObject<HTMLInputElement | HTMLTextAreaElement>
The ref passed to the input element.inputProps?
InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>
Props passed to the input element.isDisabled?
boolean
Whether the input is disabled.isReadOnly?
boolean
Whether the input can be selected but not changed by the user.isRequired?
boolean
Whether user input is required on the input before form submission.label?
ReactNode
Label of the input elementlabelProps?
LabelHTMLAttributes<HTMLLabelElement>
Props passed to the label.multiline?
boolean
Whether the textfield should support multiline input (textarea).startIcon?
ReactNode
Icon displayed at the start of the text field.validationState?
ValidationState
Whether the input should display its "valid" or "invalid" visual styling.as?
NonNullable<T>
css?
CSS
Theme aware style object.