Components

Textarea

Multi-line text entry for descriptions, reasons and notes.

Storybook: Storybook
Source: Source

When to use

Textarea is for free text that may run over several lines: a description, a reason, a note, feedback.

When not to use

For a single-line value: Use TextInput for a name, email or short title.
For formatted text: Bold, lists or links need a rich text editor; Textarea takes plain text.
For a choice between options: Use selection controls.

Anatomy

Field label

Help text goes here.

import { Textarea } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <Textarea label="Field label" description="Help text goes here." />
    </div>
  );
}

Label: the Field label, with the necessity marker when needed.
Text area: a <textarea>; rows lines high, body-md text style.
Counter: optional; with showCount, aligned to the end.
Help text: description.
Error: error; one message or several.

Behaviour

rows sets the minimum height; the user can make the field taller.
By default the height grows with the content (autoResize, field-sizing: content), stops at maxRows lines and the field scrolls. autoResize={false} keeps a fixed height with a vertical resize handle.
The counter does not block typing; over the limit the field gets aria-invalid and the counter turns danger.
Uncontrolled, the counter tracks the value itself; controlled, pass value and onValueChange.
A readOnly field takes focus and is submitted; a disabled field is not submitted.

Guidelines

Choose the height for the expected text length; 2–3 lines are enough for short notes.
When there is a limit, show the counter and state the limit in the help text too.
On mobile, keep autoResize on with maxRows={5}.
Do not put instructions in the placeholder; instructions go in the help text.

Content

The label says what the field is for: “Description”, “Reason”.
The error message says what to do: “Enter at most 500 characters.”

Turkish	English
2 karakter kaldı	2 characters left
2 karakter fazla	2 characters too many

TextInput: single-line text entry.
Field: binds label, help text, error and counter.
Label: a label outside Field.