TextArea

Usage

Import the component and render it.

import { TextArea } from 'src/components/TextArea/TextArea';

<TextArea label="Label" placeholder="Placeholder text" helperText="Helper text" />

Accessibility

Role: textbox, multi-line (native <textarea>).

• The Label is a <label for> the field: clicking it focuses the field. Without a label, pass aria-label.
• The helper text is linked with aria-describedby; with error it is the error message and the field gets aria-invalid="true".
• Text fields show :focus-visible on click as well as on Tab, so Focus appears whenever the field is being typed in.

States

Filled comes from the content (defaultValue); Disabled from the disabled prop; Error from the error prop. Hover and Focus follow the pointer and the keyboard: try them in the playground.

<TextArea defaultValue="Input text" />
<TextArea disabled />
<TextArea error />

Used in

TextArea is part of Form.

Actions

Pass callbacks to respond to the component.

import { TextArea } from 'src/components/TextArea/TextArea';

<TextArea
  label="Label"
  placeholder="Placeholder text"
  helperText="Helper text"
  onValueChange={(value) => console.log(value)}
/>