Multi-line text in the TextInput box, resizable vertically, with an optional character count.
Textarea wears the TextInput box and tokens. showCount with maxLength shows a live count that turns to warning ink near the limit.
Installation
npx shadcn@latest add KezLahd/rime/textareaAlso installs: base, field, text-input.
Usage
import { Field, Textarea } from "@/components/ui";
<Field label="Note for the customer">
<Textarea maxLength={1000} showCount rows={4} />
</Field>Examples
With a count
0 / 280
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
| invalid | boolean | ||
| showCount | boolean | Shows "n / max" under the box. Requires maxLength and a controlled value. |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes, TextareaHTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --input-font-size | var(--text-input) | … |
| --input-pad-x | calc(14px * var(--density)) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --density | tokens.css | … |
| --font-body | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-placeholder | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-input | tokens.css | … |
| --warning-ink | tokens.css | … |
Accessibility
- Wrap it in <Field label=…>: Field wires the label, hint and error to the control (id, aria-describedby, aria-invalid) through context, so the control needs no ids of its own.
- The count sits in a polite live region tied to the textarea by aria-describedby.
Do and don't
Do
- Give a maxLength whenever the server has one.
Don't
- Don't disable resize; vertical resize is the user's.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open textarea.md