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
<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