Radio Group
Single selection from a set of options. Built on the Radix UI Radio Group primitive.
<RadioGroup className="max-w-xs" defaultValue="comfortable"> <HStack align="center" gap={2}> <RadioGroupItem id="r1" value="default" /> <Label htmlFor="r1">Default</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem id="r2" value="comfortable" /> <Label htmlFor="r2">Comfortable</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem id="r3" value="compact" /> <Label htmlFor="r3">Compact</Label> </HStack></RadioGroup>Usage
import { RadioGroup, RadioGroupItem } from "@reva/ui";<RadioGroup defaultValue="a">
<RadioGroupItem value="a" />
</RadioGroup>Composition
RadioGroup
├── RadioGroupItem (value + id)
└── Label (htmlFor → item id)Pair each RadioGroupItem with a Label using matching id / htmlFor, or wrap items in Field for legends and descriptions.
Examples
Horizontal
Add flex direction on the group (items stay in a row on wide screens).
<RadioGroup className="flex flex-wrap gap-4" defaultValue="sm"> <HStack align="center" gap={2}> <RadioGroupItem id="sz-sm" value="sm" /> <Label htmlFor="sz-sm">Small</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem id="sz-md" value="md" /> <Label htmlFor="sz-md">Medium</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem id="sz-lg" value="lg" /> <Label htmlFor="sz-lg">Large</Label> </HStack></RadioGroup>Disabled item
<RadioGroup className="max-w-xs" defaultValue="a"> <HStack align="center" gap={2}> <RadioGroupItem id="d-a" value="a" /> <Label htmlFor="d-a">Enabled</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem disabled id="d-b" value="b" /> <Label className="text-fg-muted" htmlFor="d-b"> Disabled </Label> </HStack></RadioGroup>With Field legend
Density
<VStack className="max-w-md" gap={2}> <div className="text-sm font-medium">Density</div> <RadioGroup defaultValue="cozy"> <HStack align="center" gap={2}> <RadioGroupItem id="den-cozy" value="cozy" /> <Label htmlFor="den-cozy">Cozy</Label> </HStack> <HStack align="center" gap={2}> <RadioGroupItem id="den-compact" value="compact" /> <Label htmlFor="den-compact">Compact</Label> </HStack> </RadioGroup></VStack>Props
RadioGroup and RadioGroupItem forward to Radix Radio Group. See Radix UI Radio Group and shadcn Radio Group.
| Component | Common props |
|---|---|
RadioGroup | value, defaultValue, onValueChange, disabled, name, required, orientation |
RadioGroupItem | value (required), disabled |