All components
Radio Group
Single-choice option lists with outline, subtle, and solid radio controls.
Variants
outline
subtle
solid
Sizes
xs
sm
md
lg
Install
zsh — radio-group
1bunx stylexblocks add radio-groupUsage — Base UI
radio-group.tsx
1234567891011121314151617import { RadioGroup } from "#components/ui/base-ui/radio-group.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Item is a label wrapper; ItemControl is Base UI's Radio.Root — checked // styling resolves via Base UI's state-aware className callback <RadioGroup.Root defaultValue="growth" variant="solid" size="md" palette={indigoPalette} aria-label="Plan"> <RadioGroup.Item> <RadioGroup.ItemControl value="growth" /> <RadioGroup.ItemText>Growth</RadioGroup.ItemText> </RadioGroup.Item> </RadioGroup.Root> );}
// controlled: <RadioGroup.Root value={plan} onValueChange={setPlan}>