Radio Group
Choose exactly one option from a small visible set.
Overview
Choose exactly one option from a small visible set. This entry is written as a registry-ready component spec: useful to humans, copyable by AI tools, and easy to map to a future shadcn registry item.
Anatomy
- Root
- Item
- Indicator
- Label
- Description
Variants
- default
- muted
- error
- disabled
States
- default
- hover
- focus-visible
- disabled
- error
- filled
Component spec
Styling tokens
Accessibility notes
- Use semantic HTML or the matching Radix primitive before custom roles.
- Keep focus-visible states obvious without adding decorative glow.
- Ensure icon-only controls have an accessible label.
- Do not rely on color alone for state or validation.
shadcn implementation
Use Radix Radio Group through the matching shadcn component when possible.
Use shadcn tokens for background, border, ring, muted text, radius, and state variants. Keep component-specific classes local and copyable.
HeroUI mapping
Radio Group can map to a HeroUI component only as an optional adapter. Keep UnBoring copy and token language framework-neutral.
Create a Radio Group component for an AI-generated interface using shadcn-style composition. Use shadcn/ui radio-group as the implementation base. The component should support default, muted, error, disabled variants and default, hover, focus-visible, disabled, error, filled states. Include clear anatomy for Root, Item, Indicator, Label, Description. Keep the visual language black, white, and gray with subtle borders, practical spacing, accessible focus states, and no decorative noise.
Do not invent a custom component API when shadcn/ui radio-group already covers the base behavior. Avoid random gradients, oversized radii, unclear disabled states, missing labels, icon-only controls without accessible names, and variants that change layout unexpectedly.
Base: shadcn/ui radio-group Primitive: Radix Radio Group Tailwind: Use shadcn tokens for background, border, ring, muted text, radius, and state variants. Keep component-specific classes local and copyable. Dependency: Use Radix Radio Group through the matching shadcn component when possible.
{
"id": "radio-group",
"category": "components",
"trigger": "user interaction",
"target": "radio group",
"feeling": [
"polished",
"practical",
"precise"
],
"palette": [
"black",
"white",
"gray"
],
"radius": "8px or less",
"border": "1px solid rgba(237, 237, 236, 0.14)",
"background": "neutral surface with subtle contrast",
"foreground": "high-contrast text",
"mutedForeground": "secondary text at 68-74% contrast",
"focusRing": "2px neutral ring with offset",
"shadow": "soft elevation only when interaction needs tactility",
"motionDuration": "120ms-220ms"
}
Usage notes
Short guidance for humans and AI tools before copying the component.
Radio Group helps teams choose exactly one option from a small visible set. It should feel like a reusable product primitive, not a one-off decoration.
Start from shadcn/ui radio-group. Use Radix Radio Group through the matching shadcn component when possible. Keep variants token-driven and keep states predictable.
Do not invent a custom component API when shadcn/ui radio-group already covers the base behavior. Avoid random gradients, oversized radii, unclear disabled states, missing labels, icon-only controls without accessible names, and variants that change layout unexpectedly.