Radio group
Radio group is a neobrutalist React component from Cruise UI. Native radios in a fieldset: pick exactly one of a few visible options. Install it with npx shadcn@latest add @cruiseui/radio-group.
Install
Terminal
npx shadcn@latest add @cruiseui/radio-groupFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
import { CruiseRadioGroup } from "@/components/cruise/radio-group";
export default function RadioGroupExample() {
return (
<CruiseRadioGroup
legend="Delivery"
defaultValue="pickup"
options={[
{ value: "pickup", label: "Pick up in store" },
{ value: "lagos", label: "Delivery in Lagos" },
{ value: "other", label: "Delivery outside Lagos", disabled: true },
]}
/>
);
}
<fieldset class="radio-group">
<legend>Delivery</legend>
<label class="check"><input type="radio" class="radio" name="delivery" value="pickup" checked> <span>Pick up in store</span></label>
<label class="check"><input type="radio" class="radio" name="delivery" value="lagos"> <span>Delivery in Lagos</span></label>
<label class="check"><input type="radio" class="radio" name="delivery" value="other"> <span>Delivery outside Lagos</span></label>
</fieldset>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
Exactly one of 2–5 options that people should see side by side.
When not to
More than 5 options (use a Select). Several at once (use Checkboxes).
Props
CruiseRadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
legend | ReactNode | — | — |
options | CruiseRadioOption<V>[] | — | — |
value? | V | — | — |
defaultValue? | V | — | — |
onChange? | ((value: V) => void) | — | — |
name? | string | — | — |
className? | string | — | — |
Accessibility
- A <fieldset> with a <legend>; arrow keys move between options natively.
- Radios are the one round control (besides avatars).