<RadioGroup label="Select an option">
<div className="flex items-center gap-4">
<RadioGroupItem value="1">Option 1</RadioGroupItem>
<RadioGroupItem value="2">Option 2</RadioGroupItem>
<RadioGroupItem value="3">Option 3</RadioGroupItem>
</div>
</RadioGroup>Examples
Sizes
Pass the size prop to the RadioGroup component to change the size of the radio component.
<div className="flex flex-col gap-4">
<RadioGroup size="xs">
<RadioGroupItem value="xs">Radio xs</RadioGroupItem>
</RadioGroup>
<RadioGroup size="sm">
<RadioGroupItem value="sm">Radio sm</RadioGroupItem>
</RadioGroup>
<RadioGroup>
<RadioGroupItem value="md">Radio md</RadioGroupItem>
</RadioGroup>
<RadioGroup size="lg">
<RadioGroupItem value="lg">Radio lg</RadioGroupItem>
</RadioGroup>
<RadioGroup size="xl">
<RadioGroupItem value="xl">Radio xl</RadioGroupItem>
</RadioGroup>
</div>States
Pass the disabled or invalid prop to the RadioGroup component to change the visual state of the radio.
<div className="flex flex-col gap-4">
<RadioGroup disabled>
<RadioGroupItem value="1">Disabled</RadioGroupItem>
</RadioGroup>
<RadioGroup value="2" disabled>
<RadioGroupItem value="2">Disabled</RadioGroupItem>
</RadioGroup>
<RadioGroup readOnly>
<RadioGroupItem value="3">Readonly</RadioGroupItem>
</RadioGroup>
<RadioGroup invalid>
<RadioGroupItem value="4">Invalid</RadioGroupItem>
</RadioGroup>
</div>Color
Use the colorPalette prop to change the color of the radio.
gray
orange
teal
green
red
<div className="grid grid-cols-[8ch_1fr] items-center gap-y-2">
<Text>gray</Text>
<RadioGroup colorPalette="gray" value="gray">
<RadioGroupItem value="gray" />
</RadioGroup>
<Text>orange</Text>
<RadioGroup colorPalette="orange" value="orange">
<RadioGroupItem value="orange" />
</RadioGroup>
<Text>teal</Text>
<RadioGroup colorPalette="teal" value="teal">
<RadioGroupItem value="teal" />
</RadioGroup>
<Text>green</Text>
<RadioGroup colorPalette="green" value="green">
<RadioGroupItem value="green" />
</RadioGroup>
<Text>red</Text>
<RadioGroup colorPalette="red" value="red">
<RadioGroupItem value="red" />
</RadioGroup>
</div>