RadioGroup
Form ControlsStable
Radio button component for single selection from multiple choices. Built on Radix RadioGroup with full keyboard support.
Quick Import
import { RadioGroup } from "@cohere-ai/waypoint-ui/radio-group";Live Preview
Loading RadioGroup...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string | - | Controlled selected value |
defaultValue | string | - | Default selected value |
onValueChange | function | - | Callback on change |
disabled | boolean | false | Disables all items |
Examples
Radio Group with Labels
Standard radio group with two options
1 import { RadioGroup, RadioGroupItem } from '@cohere-ai/waypoint-ui/radio-group'; 2 import { Label } from '@cohere-ai/waypoint-ui/label'; 3 4 <RadioGroup defaultValue="option-1"> 5 <div className="flex items-center gap-2"> 6 <RadioGroupItem value="option-1" id="o1" /> 7 <Label htmlFor="o1">Option 1</Label> 8 </div> 9 <div className="flex items-center gap-2"> 10 <RadioGroupItem value="option-2" id="o2" /> 11 <Label htmlFor="o2">Option 2</Label> 12 </div> 13 </RadioGroup>
Additional Resources
Accessibility
WCAG AA
Keyboard Navigation
Arrow keys move between options within the group.
Found an Issue?
If you've encountered a bug or have feedback about the RadioGroup component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.