RadioGroup

Composition preview

Try RadioGroup alongside its related selection components. These examples keep all actions local.

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";

<>
<RadioGroup defaultValue="daily" aria-label="Frequency">
  <RadioGroupItem value="daily" id="daily" /><Label htmlFor="daily">Daily</Label>
  <RadioGroupItem value="weekly" id="weekly" /><Label htmlFor="weekly">Weekly</Label>
</RadioGroup>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

value/defaultValue, onValueChange, orientation; RadioGroupItem value

Usage & accessibility

Group with a meaningful accessible name. Existing native radio fields use Input to retain browser name grouping and events.

Implementation contract

src/components/ui/radio-group.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.