Textarea
Textareas collect longer notes, descriptions, and collaborative product content.
Overview and decision boundary
Use Textarea for longer notes, descriptions, comments, and collaborative content.
Do not use Textarea for single-line values like titles or search.
Preview
Add context that helps collaborators understand this item.
import { Field, Textarea } from '@nerio-ui/ui';<Field label="Notes" description="Add context for collaborators."><Textarea placeholder="Add launch context" /></Field>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add textareaimport { Field, Textarea } from '@nerio-ui/ui';Usage
import { Field, Textarea } from '@nerio-ui/ui';<Field label="Notes" description="Add context for collaborators."><Textarea placeholder="Add launch context" /></Field>Variants
| Variant | Purpose |
|---|---|
default | Default variant using semantic Nerio tokens. |
invalid | Invalid is part of the public component contract. |
disabled | Disabled is part of the public component contract. |
read-only | Read Only is part of the public component contract. |
Anatomy
| Slot | Purpose |
|---|---|
root | Native textarea with tokenized border, radius, padding, and focus. |
States
| State | Purpose |
|---|---|
Focus | Visible focus treatment remains consistent with Input. |
Disabled | Keeps content visible while preventing edits. |
Read-only | Stays focusable and selectable while using the shared read-only control surface. |
Required | Use native required attributes for mandatory long-form values. |
Invalid | Pair with Field and FormMessage. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Use with Label or Field so the control has an accessible name.
- Supports native textarea attributes including required, disabled, readOnly, aria-describedby, and rows.
- Invalid state maps to aria-invalid and a truthful data-invalid hook, including when aria-invalid is supplied directly.
- Read-only stays focusable and selectable while exposing the same shared form-control boundary as Input.
- Keep resize behavior available unless a product workflow requires a fixed height.
API
| Prop | Purpose |
|---|---|
className | Extends the component root while preserving Nerio tokenized defaults. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | textarea installs 6 source files into the configured components directory. |
Base UI | No interactive primitive required. |
Registry dependencies | None. |
Package dependencies | clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use Textarea for longer notes, descriptions, comments, and collaborative content.
Do / do not
Do
Use for content that benefits from multiple lines.
Do not
Do not use Textarea for single-line values like titles or search.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-input-height-md | Public customization point for this component contract. |
--n-textarea-min-height | Public customization point for this component contract. |
--n-input-radius | Public customization point for this component contract. |
--n-input-background | Public customization point for this component contract. |
--n-input-border | Public customization point for this component contract. |
--n-input-border-hover | Public customization point for this component contract. |
--n-input-border-focus | Public customization point for this component contract. |
--n-input-border-danger | Public customization point for this component contract. |
--n-input-placeholder | Public customization point for this component contract. |
--n-input-foreground | Public customization point for this component contract. |
--n-input-disabled-background | Public customization point for this component contract. |
--n-input-disabled-foreground | Public customization point for this component contract. |
--n-input-readonly-background | Public customization point for this component contract. |
--n-input-readonly-border | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |