Textarea

v0.5.0
Stable

A bare multi-line text input — the native `<textarea>` is this component's own root element. It has no built-in label/hint/error; wrap it in `FormField` for that chrome. Works standalone too — not every textarea needs the full form suite.

pnpm add @behivetech/atoms.textarea

You are viewing Textarea v0.5.0, snapshotted 2026-11-09. The latest is v0.5.1. Go to the latest →

A bare multi-line text input — the native <textarea> is this component's own root element. It has no built-in label/hint/error; wrap it in FormField for that chrome. Works standalone too — not every textarea needs the full form suite.

Usage

1import { Textarea } from '@behivetech/atoms.textarea';
2import { FormField } from '@behivetech/forms.form-field';
3

4const [value, setValue] = useState('');
5

6<Textarea value={value} onChange={(e) => setValue(e.target.value)} />
7

8<FormField label="Bio" htmlFor="bio" hint="Max 200 characters.">
9  <Textarea id="bio" rows={3} />
10</FormField>

Pass invalid (adds the --invalid modifier and sets aria-invalid) to visually mark the field as invalid (pair with FormField's error prop for the message).

Examples

Open all 4 →
Basic Textarea
1const BasicTextarea = () => (
2  <Textarea placeholder="Type your message..." />
3);
4

5render(<BasicTextarea />);
Textarea With Form Field
1const TextareaWithFormField = () => (
2  <FormField label="Bio" htmlFor="bio" hint="Max 200 characters.">
3    <Textarea id="bio" rows={3} />
4  </FormField>
5);
6

7render(<TextareaWithFormField />);

Properties

Textarea props

PropTypeDefaultDescription
classNamestring—Additional class names to merge with the component root element
invalidbooleanfalseMarks the field as invalid: adds the `--invalid` modifier and sets `aria-invalid="true"`

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).