Radio Group
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A set of checkable buttons where no more than one of the buttons can be checked at a time.
Overview
Use Radio Group when the user must choose one option from a set.
Radio groups are useful for plans, visibility, shipping speed, sort order, and settings where choices are mutually exclusive.
Anatomy
A radio group has a group label, radio items, item labels, optional descriptions, and selection state.
Behavior
Show all important options when the list is short. Use Select when the list is long or when space is limited.
Accessibility
Group radio items with a clear label. Each item should have its own label, and keyboard users should be able to move through options with arrow keys.
Installation
npx honestui@latest add radio-groupUsage
import { Label } from "@/components/ui/label"
import { Radio, RadioGroup } from "@/components/ui/radio-group"<RadioGroup defaultValue="next">
<Label>
<Radio value="next" /> Next.js
</Label>
<Label>
<Radio value="vite" /> Vite
</Label>
<Label>
<Radio value="astro" /> Astro
</Label>
</RadioGroup>Examples
Our examples cover disabled, described, card-style, and form-connected radio groups.
For accessible labelling and validation, prefer using the Field component to wrap radio buttons. See the related example: Radio Group field.