primitives

RadioGroup

Single-select group of mutually exclusive options. For boolean on/off use `<Switch>` or `<Checkbox>`; for many-of-many use a list of `<Checkbox>`.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/radio-group.json

Or import from the workspace package:

import { RadioGroup, RadioGroupItem, Label } from "@8maverik8/design";

Examples

Plan picker

Monthly · $9

Yearly · $90

Team · custom

<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem id="monthly" value="monthly" /> <Label htmlFor="monthly">Monthly · $9</Label>
  <RadioGroupItem id="yearly"  value="yearly"  /> <Label htmlFor="yearly">Yearly · $90</Label>
</RadioGroup>

Guidelines

Use RadioGroup when there are 2-5 options and seeing all of them at a glance is useful.
Use RadioGroup with 6+ options.It eats vertical space. Use `<Select>` (or Combobox if searchable).
Always provide a default value — don't ship an unselected RadioGroup.Most of the time users want a sensible default already chosen.