Components / inputs

Textarea

Multi-line text input for longer free-form content (messages, comments).

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

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

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

<Textarea label="Message" />

• Example values were filled in for the required prop label: replace them with your own.
• Same as Text Field. Three rows (96px) by default; use the rows prop to change it.
• Storybook: Inputs/Textarea.

Props

States. Same as Text Field. Three rows (96px) by default; use the rows prop to change it.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Longer free-form content such as messages and comments

Do not use it when

• Short single-line answers (use Text Field)

Rules for agents

• Every Textarea has a visible label; the placeholder never replaces it
• When there is a length limit, set maxLength and say the limit in helperText so it is known before the user hits it
• For an invalid field, pass the message as error content rather than error={true}
• Set rows to fit the expected answer (3 is the default); do not use a Textarea for one-line answers

Avoid

• Using a Textarea for a short single-line answer such as a name or email (use Text Field)
• Using the placeholder as the only label
• Cutting off text silently at a limit the user was never told about
• Clearing the content after an error or a failed submit

Writing the content

• Labels are short nouns or questions: 'Message', 'What went wrong?'
• Helper text sets expectations: 'Up to 500 characters'
• Use sentence case

Keyboard

• Enter inserts a new line

Accessibility

• aria-describedby for helper or error text
• aria-invalid="true" in Error

Colour tokens it reads

Related

• Text Field

inputs 6 Figma variants Try it in the live demo