Components

Textarea

Multi-line text input built on React Aria's TextField/TextArea, sharing Input's own Label and HintText. Two sizes, an optional tooltip, and invalid/disabled states - driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

Purpose of data useExplain how you plan to use this data.

md · valid · enabled

Controls

Size

Hint

Sizes

Two sizes - sm and md (default).

Small / Medium

sm

md

With hint text

Pass a hint for supporting detail beneath the field.

Labelled with hint

Describe your intended useExplain how you plan to use this data.

With tooltip

Use the tooltip prop to show a help tooltip next to the label - the same Label/Tooltip pairing Input uses.

Tooltip

Purpose of data use

Disabled

Dims the field and prevents interaction.

Disabled

Notes

Invalid

Pass isInvalid to switch the ring to the error token - typically paired with a validation-error hint.

Invalid

Rejection reasonA reason is required.

API

TextArea pairs a Label/HintText (shared with Input) around the underlying TextAreaBase field.

Prop	Type	Default
`label`	`string`	`-`
`hint`	`ReactNode`	`-`
`tooltip`	`string`	`-`
`size`	`"sm" \| "md"`	`"md"`
`placeholder`	`string`	`-`
`rows`	`number`	`-`
`cols`	`number`	`-`
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onChange`	`(value: string) => void`	`-`
`isDisabled`	`boolean`	`false`
`isRequired`	`boolean`	`false`
`isInvalid`	`boolean`	`false`
`hideRequiredIndicator`	`boolean`	`false`
`textAreaClassName`	`string`	`-`
`className`	`string`	`-`

Usage

import { TextArea } from "@/components/base/textarea/textarea";

<TextArea
  label="Purpose of data use"
  hint="Explain how you plan to use this data."
  rows={4}
/>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.