Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Made by imskyleenPowered by
Loading component...
When to use
Radio groups provide mutually exclusive options where users must select exactly one choice. Use this decision tree to determine when radio groups are appropriate:
Installation
Usage
Basic Usage
import { RadioGroup, RadioGroupItem } from "@/components/redpanda-ui/radio-group"
import { Label } from "@/components/redpanda-ui/label"
<RadioGroup defaultValue="option1">
<div className="flex items-center space-x-2">
<RadioGroupItem value="option1" id="r1" />
<Label htmlFor="r1">Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option2" id="r2" />
<Label htmlFor="r2">Option 2</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option3" id="r3" />
<Label htmlFor="r3">Option 3</Label>
</div>
</RadioGroup>Controlled Usage
import { useState } from "react"
function ControlledRadioGroup() {
const [value, setValue] = useState("option1")
return (
<RadioGroup value={value} onValueChange={setValue}>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option1" id="r1" />
<Label htmlFor="r1">Option 1</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="option2" id="r2" />
<Label htmlFor="r2">Option 2</Label>
</div>
</RadioGroup>
)
}With Custom Animation
<RadioGroup defaultValue="fast">
<div className="flex items-center space-x-2">
<RadioGroupItem
value="fast"
id="fast"
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
/>
<Label htmlFor="fast">Fast Animation</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="slow"
id="slow"
transition={{ type: 'spring', stiffness: 100, damping: 30 }}
/>
<Label htmlFor="slow">Slow Animation</Label>
</div>
</RadioGroup>Anatomy
The Radio Group component is built with Radix UI primitives and enhanced with Motion animations:
RadioGroup (Root Container)
├── RadioGroupItem (Individual Radio Button)
│ ├── Motion wrapper - handles hover/tap animations
│ ├── Border/Visual styling - circular border
│ └── RadioGroupIndicator (Selection Indicator)
│ └── Motion Circle - animated filled circle
└── Layout - grid with gap-2.5 spacing
Animation States:
├── Hover - scale: 1.05
├── Tap - scale: 0.95
└── Selection Indicator
├── Initial - opacity: 0, scale: 0
├── Selected - opacity: 1, scale: 1
└── Deselected - opacity: 0, scale: 0Key Features:
- Single Selection: Only one option can be selected at a time
- Keyboard Navigation: Arrow keys move between options, Space/Enter selects
- Accessibility: Full ARIA support with proper labeling and focus management
- Animation: Smooth spring animations for selection state and hover/tap feedback
- Customizable: Configurable transition timing and styling
Props
Animate UI Props
RadioGroupItem
Prop
Type
Examples
Default
Loading component...
Attached
Loading component...
Form
Loading component...
Credits
- We use Radix UI for the radio group component.
- We take our inspiration from Shadcn UI for the radio group style.
- We use Animate UI from imskyleen for all the animations.
Built by malinskibeniamin. The source code is available on GitHub.