Radio Group

Mutually exclusive option set.

Default

Light

Dark

System

<RadioGroup defaultValue="light">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="light" id="r1" /><Label htmlFor="r1">Light</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="dark" id="r2" /><Label htmlFor="r2">Dark</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="system" id="r3" /><Label htmlFor="r3">System</Label>
  </div>
</RadioGroup>