Note
For the printer
A note that travels with the sheet.
Textarea
Collects multiple lines of text. Resizes vertically only.
Preview
In action
When to use
Use it for
- Free text longer than one line.
- Vertical resize only; the width follows the grid.
Not for
- Single values; use Input.
- Rich text; this is a native textarea.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { Textarea } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/textarea.
2. Vendor the source
npx @noorddev/vlak-cli add textarea
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/textarea.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { Textarea } from "@noorddev/vlak-react";
<Textarea label="Notes" placeholder="What should we know?" rows={4} />Props
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | ||
feedback | ReactNode |
Also accepts TextareaHTMLAttributes<HTMLTextAreaElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves focus to the field; Enter inserts a line break |
Accessibility
- A native <textarea> with a generated id; label renders a <label> pointing at it.
- Inside Field, hint and error reach it through aria-describedby and aria-invalid.
Markup
<div class="rs-field"><span class="rs-field-label">Notes</span><textarea class="rs-textarea" placeholder="What should we know?"></textarea></div>
Classes
.rs-textarea.rs-textarea-invalid.rs-textarea-feedback.rs-textarea-field.rs-textarea-label