Input
Input is a neobrutalist React component from Cruise UI. A text field with a label above, optional hint and an error state. Install it with npx shadcn@latest add @cruiseui/input.
Install
Terminal
npx shadcn@latest add @cruiseui/inputFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
As it appears on your ID.
Enter an 11-digit number.
import { CruiseInput } from "@/components/cruise/input";
export default function InputExample() {
return (
<div className="grid gap-6 md:grid-cols-2">
<CruiseInput label="Full name" placeholder="Ada Okafor" hint="As it appears on your ID." />
<CruiseInput label="Phone number" type="tel" defaultValue="0803" error="Enter an 11-digit number." />
</div>
);
}
<div class="field">
<label class="field-label" for="phone">Phone number</label>
<input class="select" style="padding-right: 14px" id="phone" type="tel" aria-describedby="phone-help">
<p class="field-help" id="phone-help">We'll text you when the rider leaves.</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
Short free text: names, phone numbers, amounts.
When not to
Picking from known options (use a Select or Combobox).
Props
CruiseInput
| Prop | Type | Default | Description |
|---|---|---|---|
label? | string | — | Visible label. Leave out inside a CruiseFormField (it brings the label). |
hint? | string | — | Helper text under the field. |
error? | string | — | Error message; turns the border and helper text --danger. |
Also takes every native <input> attribute.
Accessibility
- Always a visible <label> linked with for/id.
- Hints and errors are linked with aria-describedby; errors set aria-invalid.
- 17px text, so iOS doesn't zoom in on focus.