Radio Group
@/components/kamod-ui/radio-group
Installation
Import RadioGroup and RadioGroupItem from `@/components/kamod-ui/radio-group`. Label pairs cleanly via id and htmlFor.
pnpm add @kamod-ch/uiUsage
Use defaultValue for uncontrolled groups, or value with onValueChange when the parent owns state. Omit name to get a stable generated group name. Pair each item with Label for accessible names; use size="sm" for dense layouts. disabled and aria-invalid on items match form and validation patterns.
import { RadioGroup } from "@/components/kamod-ui/radio-group";<RadioGroup />Default
Classic row layout with visible focus rings and clear typography, similar to shadcn/ui.
Description
Stack a title and helper line beside each control for settings-style lists.
Choice card
Clickable cards with the control aligned to the primary label.
Field group
Use Field for a group heading, description, and stacked options.
Yearly and lifetime plans offer significant savings.
Disabled & invalid
Per-item disabled state and aria-invalid for validation feedback.
Notification preferences
Choose how you want to receive notifications.
Inline & small
Horizontal groups and compact indicators for toolbars.
API Reference
Props, slots and variants for this component.
Radio Group
Radio Group component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| name | string | undefined | auto |
| defaultValue | string | undefined | undefined |
| value | string | undefined | undefined (uncontrolled) |
| onValueChange | (value: string) => void | undefined |
| RadioGroupItem value | string | required |
| RadioGroupItem size | "default" | "sm" | "default" |
| RadioGroupItem disabled | boolean | false |
| RadioGroupItem aria-invalid | boolean | false |
Accessibility Notes
Prefer explicit labels via Label htmlFor and id, or aria-label on RadioGroupItem when the label is decorative. Keep one focusable radio per option; the root exposes role="radiogroup".