KO
5

Radio Group

A set of checkable buttons—known as radio buttons—where you can check as many as you want.

Blood Type
import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function RadioGroupDemo() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-medium">Blood Type</legend>
      <RadioGroup defaultValue="a">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="a" id="r1" />
          <Label htmlFor="r1">Type A</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="b" id="r2" />
          <Label htmlFor="r2">Type B</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="ab" id="r3" />
          <Label htmlFor="r3">Type AB</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="o" id="r4" />
          <Label htmlFor="r4">Type O</Label>
        </div>
      </RadioGroup>
    </fieldset>
  )
}

How it works

Looks like a normal radio group, but you can select multiple options. Clicking an already-selected option deselects it. Because why should radio buttons limit your choices?

Installation

Coming SoonPackage not yet published on npm.
pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>
Coming SoonPackage not yet published on npm.

Examples

Disabled

Use the disabled prop to disable the entire radio group.

import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function RadioGroupDisabled() {
  return (
    <RadioGroup defaultValue="comfortable" disabled>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="rd1" />
        <Label htmlFor="rd1">Default</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="rd2" />
        <Label htmlFor="rd2">Comfortable</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="compact" id="rd3" />
        <Label htmlFor="rd3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

API Reference

See the Radix UI Radio Group documentation.