Alternatives

TextInput — For single-line text input
CurrencyInput — For currency amount input
DurationInput — For amount of time input
SearchInput — For search input
SearchInput — For search input

Usage

The Textarea component is a styled textarea element and is exposed for cases where you need to implement a custom interface.

It shares disabled, read only and validation states with TextInput.

Edit in Playroom

<Field label="Label">
  <Textarea />
</Field>

Size

There are three options for the size of the Textarea input, "medium" is the default.

Edit in Playroom

<Stack gap="small">
  <Field label="medium (default)">
    <Textarea size="medium" placeholder="Message..." />
  </Field>
  <Field label="small">
    <Textarea size="small" placeholder="Message..." />
  </Field>
</Stack>

Weight

Default weight is "subtle". For use in data-dense interfaces you can apply a weight of "none" to hide the "chrome" of the input until the user interacts with it, on hover or focus.

Edit in Playroom

<Field label="Weight">
  <Textarea weight="none" placeholder="Message..." />
</Field>

Controlled

Notice that value is initialized with useState, so that the text area starts off with some text in it.

Edit in Playroom

const [value, setValue] = useState('Initial value');
const handleChange = (e) => setValue(e.target.value);
return (
  <Field label="Controlled">
    <Textarea onChange={handleChange} value={value} />
  </Field>
);