Radio Group

The Radio Group component provides a collection of interactive radio buttons, allowing users to select a single option from a predefined set. Only one radio button within the group can be active at any given moment.

Docs API Reference

Default

Comfortable

Compact

Setting Up the Radio Group Component

npx shadcn@latest add radio-group

Implementing the Radio Group Component

// Import the Label component
// Import the RadioGroup and RadioGroupItem components
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Practical Examples and Implementations

Integrating Radio Group within a Form Structure

Progress Resizable