Yami

Radio Group

A set of checkable buttons where only one can be checked.

Installation

Add the radio group component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/radio-group.json

Usage

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

<RadioGroup defaultValue="comfortable" className="w-48">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="default" id="r1" />
    <Label htmlFor="r1">Default</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="comfortable" id="r2" />
    <Label htmlFor="r2">Comfortable</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="compact" id="r3" />
    <Label htmlFor="r3">Compact</Label>
  </div>
</RadioGroup>

Examples

With description

Field + FieldDescription

Standard spacing for most use cases.

More space between elements.

Minimal spacing for dense layouts.

Code

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

<RadioGroup defaultValue="comfortable" className="w-72">
  <Field orientation="horizontal">
    <RadioGroupItem value="default" id="desc-r1" />
    <FieldContent>
      <FieldLabel htmlFor="desc-r1">Default</FieldLabel>
      <FieldDescription>Standard spacing for most use cases.</FieldDescription>
    </FieldContent>
  </Field>
  {/* ... */}
</RadioGroup>

Choice cards

FieldLabel wrapping Field

Code

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

<RadioGroup defaultValue="plus" className="w-72">
  <FieldLabel htmlFor="plus-plan">
    <Field orientation="horizontal">
      <FieldContent>
        <FieldTitle className="text-xs">Plus</FieldTitle>
        <FieldDescription className="font-sans tracking-normal normal-case">
          For individuals and small teams.
        </FieldDescription>
      </FieldContent>
      <RadioGroupItem value="plus" id="plus-plan" />
    </Field>
  </FieldLabel>
  {/* ... */}
</RadioGroup>

Fieldset

FieldSet + FieldLegend
Subscription plan

Yearly and lifetime plans offer savings.

Code

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

<FieldSet className="w-72">
  <FieldLegend variant="label">Subscription plan</FieldLegend>
  <FieldDescription>Yearly and lifetime plans offer savings.</FieldDescription>
  <RadioGroup defaultValue="monthly">
    <Field orientation="horizontal">
      <RadioGroupItem value="monthly" id="plan-monthly" />
      <FieldLabel htmlFor="plan-monthly" className="font-normal normal-case">
        Monthly ($9.99/mo)
      </FieldLabel>
    </Field>
    {/* ... */}
  </RadioGroup>
</FieldSet>

Disabled

Disable individual items

Code

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

<RadioGroup defaultValue="option2" className="w-48">
  <Field orientation="horizontal" data-disabled>
    <RadioGroupItem value="option1" id="disabled-1" disabled />
    <FieldLabel htmlFor="disabled-1" className="font-normal">Disabled</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="option2" id="disabled-2" />
    <FieldLabel htmlFor="disabled-2" className="font-normal">Option 2</FieldLabel>
  </Field>
</RadioGroup>

Invalid

aria-invalid + data-invalid
Notifications

Code

import {
  Field,
  FieldError,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<FieldSet className="w-72">
  <FieldLegend variant="label">Notifications</FieldLegend>
  <RadioGroup defaultValue="email">
    <Field orientation="horizontal" data-invalid>
      <RadioGroupItem value="email" id="invalid-email" aria-invalid />
      <FieldLabel htmlFor="invalid-email" className="font-normal normal-case">
        Email only
      </FieldLabel>
    </Field>
    {/* ... */}
  </RadioGroup>
  <FieldError>Please choose a valid option.</FieldError>
</FieldSet>