Textarea
Textarea is a neobrutalist React component from Cruise UI. Multi-line text styled like the inputs, with auto-grow and a character counter. Install it with npx shadcn@latest add @cruiseui/textarea.
Install
Terminal
npx shadcn@latest add @cruiseui/textareaFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
0 / 500 characters
Tell us a bit more (at least 20 characters).
import { CruiseTextarea } from "@/components/cruise/textarea";
export default function TextareaExample() {
return (
<div className="grid gap-6 md:grid-cols-2">
<CruiseTextarea label="Delivery note" placeholder="Gate code, landmark, who to call…" maxLength={500} autoGrow />
<CruiseTextarea label="Message" defaultValue="Hi," error="Tell us a bit more (at least 20 characters)." />
</div>
);
}
<div class="field">
<label class="field-label" for="note">Delivery note</label>
<textarea class="textarea" id="note" maxlength="500" aria-describedby="note-count" data-autogrow></textarea>
<p class="field-count" id="note-count">0 / 500</p>
</div>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
Longer free text: delivery notes, messages, reviews.
When not to
One-line answers (use an Input).
Props
CruiseTextarea
| Prop | Type | Default | Description |
|---|---|---|---|
label? | string | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
hint? | string | — | — |
error? | string | — | — |
autoGrow? | boolean | false | Grows with its content instead of scrolling (still resizable). |
showCount? | boolean | false | Shows "120 / 500" under the box; needs maxLength, or shows the count alone. |
Also takes every native <textarea> attribute.
Accessibility
- A visible label (or a FormField around it).
- The counter ("120 / 500") is linked with aria-describedby.
- 17px text, so iOS doesn't zoom in on focus.