eo-n/ui

Radio Group

Lets the user select exactly one option from a set of radio buttons.

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="bus">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="bus" id="bus" />
        <Label htmlFor="bus">Bus</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="van" id="van" />
        <Label htmlFor="van">Van</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="car" id="car" />
        <Label htmlFor="car">Car</Label>
      </div>
    </RadioGroup>
  );
}

Installation

npx shadcn@latest add @eo-n/radio-group

Usage

Import all parts and piece them together.

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
<RadioGroup>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="right" id="right" />
    <Label htmlFor="right">Right</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="left" id="left" />
    <Label htmlFor="left">Left</Label>
  </div>
</RadioGroup>

Examples

Disabled Item

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
export function RadioGroupDisabled() {
  return (
    <RadioGroup>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="apple" id="apple" disabled />
        <Label htmlFor="apple">Apple</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="orange" id="orange" />
        <Label htmlFor="orange">Orange</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="mango" id="mango" />
        <Label htmlFor="mango">Mango</Label>
      </div>
    </RadioGroup>
  );
}