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 — Ark UI
radio-group.tsx
123456789101112131415161718import { RadioGroup } from "#components/ui/ark-ui/radio-group.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; ItemControl renders the dot from the // machine's checked state <RadioGroup.Root defaultValue="growth" variant="solid" size="md" palette={indigoPalette} aria-label="Plan"> <RadioGroup.Item value="growth"> <RadioGroup.ItemControl /> <RadioGroup.ItemText>Growth</RadioGroup.ItemText> <RadioGroup.ItemHiddenInput /> </RadioGroup.Item> </RadioGroup.Root> );}
// controlled: <RadioGroup.Root value={plan} onValueChange={(d) => setPlan(d.value)}>