Components / Forms

Radio Group

A set of mutually exclusive options built on Base UI. Pair each item with a Label.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/radio-group/registry.json

Basic

RadioGroup

Monthly

Quarterly

Annual

tsx

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"

<RadioGroup defaultValue="monthly">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="monthly" id="monthly" />
    <Label htmlFor="monthly">Monthly</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="quarterly" id="quarterly" />
    <Label htmlFor="quarterly">Quarterly</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="annual" id="annual" />
    <Label htmlFor="annual">Annual</Label>
  </div>
</RadioGroup>

RadioGroup props

Prop	Type	Default	Description
value	string	-	Controlled selected value.
defaultValue	string	-	Uncontrolled initial value.
onValueChange	(value: string) => void	-	Fires when the selection changes.
disabled	boolean	-	Disables the whole group.

RadioGroupItem props

Prop	Type	Default	Description
value	string	-	The value this item represents (required).
disabled	boolean	-	Disables this single item.