Checkbox
Checkbox is a neobrutalist React component from Cruise UI. A native checkbox, restyled: square box, --primary when checked. Install it with npx shadcn@latest add @cruiseui/checkbox.
Install
Terminal
npx shadcn@latest add @cruiseui/checkboxFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
import { CruiseCheckbox } from "@/components/cruise/checkbox";
export default function CheckboxExample() {
return (
<div className="flex flex-col">
<CruiseCheckbox label="Select all extras" indeterminate />
<CruiseCheckbox label="Gift wrapping" defaultChecked />
<CruiseCheckbox label="Birthday card" />
<CruiseCheckbox label="Same-day delivery (sold out)" disabled />
</div>
);
}
<label class="check"><input type="checkbox" class="checkbox" name="terms"> <span>I agree to the terms</span></label>
<label class="check"><input type="checkbox" class="checkbox" name="news" checked> <span>Send me order updates</span></label>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
Turning one option on or off in a form, or picking several from a list.
When not to
A setting that applies straight away (use a Switch). One choice from many (use a Radio group).
Props
CruiseCheckbox
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Visible label; clicking it toggles the box (spec A5 Checkbox). |
indeterminate? | boolean | false | "Some of a group" state: an ink dash. |
Also takes every native <input> attribute.
Accessibility
- Native input inside its <label>, so the whole row is the 44px target.
- Indeterminate is set with input.indeterminate = true.