Skip to main content

Text Area

Allows users to enter and edit long form information.

http://localhost:3000
<TextArea aria-label="description" placeholder="Enter description..." />

Usage

Label

Attach a label to the select using the label prop.

http://localhost:3000
<TextArea label="Description" />

HelperText

Add additional context as well as display error messages with the helperText prop.

http://localhost:3000
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.

http://localhost:3000
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.

http://localhost:3000
<TextArea aria-label="description" isDisabled />

Props


as?The root element to be rendered

children?ReactNode

defaultValue?stringThe default value (uncontrolled).

placeholder?stringTemporary text that occupies the text input when it is empty.

value?stringThe current value (controlled).

onChange?(value: string) => voidHandler that is called when the value changes.

endIcon?ReactNodeIcon displayed at the end of the text field.

helperText?ReactNodeHelper 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?booleanWhether the input is disabled.

isReadOnly?booleanWhether the input can be selected but not changed by the user.

isRequired?booleanWhether user input is required on the input before form submission.

label?ReactNodeLabel of the input element

labelProps?LabelHTMLAttributes<HTMLLabelElement>Props passed to the label.

multiline?booleanWhether the textfield should support multiline input (textarea).

startIcon?ReactNodeIcon displayed at the start of the text field.

validationState?ValidationStateWhether the input should display its "valid" or "invalid" visual styling.

as?NonNullable<T>

css?CSSTheme aware style object.