Radio

A control that allows the user to select a single option from a group of mutually exclusive options.

radix-ui.com

Variants

Orange (Default)

<RadioGroup value="option1" onValueChange={() => {}} className="space-y-2">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="option1" />
    <label htmlFor="option1" className="text-sand-12 text-sm">
      Option 1
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="option2" />
    <label htmlFor="option2" className="text-sand-12 text-sm">
      Option 2
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option3" id="option3" />
    <label htmlFor="option3" className="text-sand-12 text-sm">
      Option 3
    </label>
  </div>
</RadioGroup>

Blue

<RadioGroup value="option2" onValueChange={() => {}} variant="blue" className="space-y-2">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="blue1" variant="blue" />
    <label htmlFor="blue1" className="text-sand-12 text-sm">
      Option 1
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="blue2" variant="blue" />
    <label htmlFor="blue2" className="text-sand-12 text-sm">
      Option 2
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option3" id="blue3" variant="blue" />
    <label htmlFor="blue3" className="text-sand-12 text-sm">
      Option 3
    </label>
  </div>
</RadioGroup>

Disabled Options

<RadioGroup defaultValue="option1" className="space-y-2">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option1" id="enabled1" />
    <label htmlFor="enabled1" className="text-sand-12 text-sm">
      Enabled option
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option2" id="disabled1" disabled={true} />
    <label htmlFor="disabled1" className="text-sand-11 text-sm">
      Disabled option
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option3" id="enabled2" />
    <label htmlFor="enabled2" className="text-sand-12 text-sm">
      Another enabled option
    </label>
  </div>
</RadioGroup>

Horizontal Layout

Inline Radio Group

<RadioGroup defaultValue="yes" className="flex items-center space-x-6">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="yes" id="yes" />
    <label htmlFor="yes" className="text-sand-12 text-sm">
      Yes
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="no" id="no" />
    <label htmlFor="no" className="text-sand-12 text-sm">
      No
    </label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="maybe" id="maybe" />
    <label htmlFor="maybe" className="text-sand-12 text-sm">
      Maybe
    </label>
  </div>
</RadioGroup>