PrimitiveAvailable
Textarea
A multiline text field with visible focus and native form behavior.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/textarea.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
export default function Demo() {
return (
<div className="grid w-full max-w-md gap-2">
<Label htmlFor="project-notes">Project notes</Label>
<Textarea
id="project-notes"
placeholder="What are you building?"
aria-describedby="notes-help"
/>
<p id="notes-help" className="bl-type-small">
Add context for your collaborators.
</p>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
- Hover never validates a field. The application decides when to show errors.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | — | Visible native text rows. |
| aria-invalid | boolean | false | Marks an invalid value. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Keep visible text labels and the semantic HTML shown in the example.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.