Embossed UI

Search documentation

Search for a page or component.

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="hourly" className="w-fit">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="hourly" id="rg-hourly" />
        <Label htmlFor="rg-hourly">Every hour</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="daily" id="rg-daily" />
        <Label htmlFor="rg-daily">Every day</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="manual" id="rg-manual" disabled />
        <Label htmlFor="rg-manual">Manually (disabled)</Label>
      </div>
    </RadioGroup>
  )
}

Installation

pnpm dlx shadcn@latest add https://ui.ikramhasan.com/r/radio-group.json

Usage

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

Examples

Choice cards

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupChoiceCards() {
  return (
    <RadioGroup defaultValue="growth" className="max-w-sm">
      {plans.map((plan) => (
        <FieldLabel key={plan.value} htmlFor={`rg-${plan.value}`}>
          <Field orientation="horizontal">
            <RadioGroupItem value={plan.value} id={`rg-${plan.value}`} />
            <FieldContent>
              <FieldTitle>{plan.title}</FieldTitle>
              <FieldDescription>{plan.description}</FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      ))}
    </RadioGroup>
  )
}

const plans = [
  {
    value: "starter",
    title: "Starter",
    description: "One store, 500 products.",
  },
  {
    value: "growth",
    title: "Growth",
    description: "Three stores, unlimited products.",
  },
  {
    value: "scale",
    title: "Scale",
    description: "Unlimited stores and priority sync.",
  },
]

API Reference

Radio Group is built on the Base UI Radio Group primitive. See the Base UI documentation for every prop.

QuestionnaireScroll Area