Kickresume UI

Command Palette

Search for a command to run...

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.

Loading…
"use client"

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

export default function RadioGroupDemo() {
  return (
    <RadioGroup
      aria-label="Density"
      defaultValue="comfortable"
      className="w-fit"
    >
      <Field orientation="horizontal">
        <RadioGroupItem value="default" id="r1" />
        <FieldLabel htmlFor="r1">Default</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="comfortable" id="r2" />
        <FieldLabel htmlFor="r2">Comfortable</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="compact" id="r3" />
        <FieldLabel htmlFor="r3">Compact</FieldLabel>
      </Field>
    </RadioGroup>
  )
}

Installation

pnpm dlx shadcn@latest add @kickresume/radio-group

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
<RadioGroup
  aria-label="Density"
  defaultValue="comfortable"
  className="w-fit"
>
  <Field orientation="horizontal">
    <RadioGroupItem value="default" id="r1" />
    <FieldLabel htmlFor="r1">Default</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="comfortable" id="r2" />
    <FieldLabel htmlFor="r2">Comfortable</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="compact" id="r3" />
    <FieldLabel htmlFor="r3">Compact</FieldLabel>
  </Field>
</RadioGroup>

Composition

Use the following composition to build a RadioGroup:

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Examples

Description

Radio group items with a description using the Field component.

Loading…
"use client"

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

export default function RadioGroupDescription() {
  return (
    <RadioGroup
      aria-label="Density"
      defaultValue="comfortable"
      className="w-fit"
    >
      <Field orientation="horizontal" className="gap-2.5">
        <RadioGroupItem value="default" id="desc-r1" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r1">Default</FieldLabel>
          <FieldDescription>
            Standard spacing for most use cases.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" className="gap-2.5">
        <RadioGroupItem value="comfortable" id="desc-r2" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r2">Comfortable</FieldLabel>
          <FieldDescription>More space between elements.</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal" className="gap-2.5">
        <RadioGroupItem value="compact" id="desc-r3" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r3">Compact</FieldLabel>
          <FieldDescription>
            Minimal spacing for dense layouts.
          </FieldDescription>
        </FieldContent>
      </Field>
    </RadioGroup>
  )
}

Choice Card

Use FieldLabel to wrap the entire Field for a clickable card-style selection.

Loading…
"use client"

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

export default function RadioGroupChoiceCard() {
  return (
    <RadioGroup aria-label="Plan" defaultValue="plus" className="max-w-sm">
      <FieldLabel htmlFor="plus-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Plus</FieldTitle>
            <FieldDescription>
              For individuals and small teams.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem value="plus" id="plus-plan" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="pro-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Pro</FieldTitle>
            <FieldDescription>For growing businesses.</FieldDescription>
          </FieldContent>
          <RadioGroupItem value="pro" id="pro-plan" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="enterprise-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Enterprise</FieldTitle>
            <FieldDescription>
              For large teams and enterprises.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem value="enterprise" id="enterprise-plan" />
        </Field>
      </FieldLabel>
    </RadioGroup>
  )
}

Fieldset

Use FieldSet and FieldLegend to group radio items with a label and description.

Loading…
"use client"

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

export default function RadioGroupFieldset() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend id="subscription-plan-legend" variant="label">
        Subscription Plan
      </FieldLegend>
      <FieldDescription>
        Yearly and lifetime plans offer significant savings.
      </FieldDescription>
      <RadioGroup
        aria-labelledby="subscription-plan-legend"
        defaultValue="monthly"
      >
        <Field orientation="horizontal" className="gap-2.5">
          <RadioGroupItem value="monthly" id="plan-monthly" />
          <FieldLabel htmlFor="plan-monthly" className="font-normal">
            Monthly ($9.99/month)
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" className="gap-2.5">
          <RadioGroupItem value="yearly" id="plan-yearly" />
          <FieldLabel htmlFor="plan-yearly" className="font-normal">
            Yearly ($99.99/year)
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" className="gap-2.5">
          <RadioGroupItem value="lifetime" id="plan-lifetime" />
          <FieldLabel htmlFor="plan-lifetime" className="font-normal">
            Lifetime ($299.99)
          </FieldLabel>
        </Field>
      </RadioGroup>
    </FieldSet>
  )
}

Disabled

Use the disabled prop on RadioGroupItem for individual options, or on RadioGroup to disable the entire group.

Loading…
"use client"

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

export default function RadioGroupDisabled() {
  return (
    <RadioGroup aria-label="Options" defaultValue="option3" className="w-fit">
      <Field orientation="horizontal" className="gap-2.5" data-disabled="true">
        <RadioGroupItem value="option1" id="disabled-1" disabled />
        <FieldLabel htmlFor="disabled-1" className="font-normal">
          Disabled
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" className="gap-2.5">
        <RadioGroupItem value="option2" id="disabled-2" />
        <FieldLabel htmlFor="disabled-2" className="font-normal">
          Option 2
        </FieldLabel>
      </Field>
      <Field orientation="horizontal" className="gap-2.5" data-disabled="true">
        <RadioGroupItem value="option3" id="disabled-3" disabled />
        <FieldLabel htmlFor="disabled-3" className="font-normal">
          Disabled (selected)
        </FieldLabel>
      </Field>
    </RadioGroup>
  )
}

Invalid

Use aria-invalid on RadioGroupItem and data-invalid on Field to show validation errors.

Loading…
"use client"

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

export default function RadioGroupInvalid() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend id="notification-preferences-legend" variant="label">
        Notification Preferences
      </FieldLegend>
      <FieldDescription id="notification-preferences-description">
        Choose how you want to receive notifications.
      </FieldDescription>
      <RadioGroup
        aria-describedby="notification-preferences-description"
        aria-labelledby="notification-preferences-legend"
        defaultValue="email"
      >
        <Field orientation="horizontal" className="gap-2.5" data-invalid="true">
          <RadioGroupItem value="email" id="invalid-email" aria-invalid />
          <FieldLabel htmlFor="invalid-email" className="font-normal">
            Email only
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" className="gap-2.5" data-invalid="true">
          <RadioGroupItem value="sms" id="invalid-sms" aria-invalid />
          <FieldLabel htmlFor="invalid-sms" className="font-normal">
            SMS only
          </FieldLabel>
        </Field>
        <Field orientation="horizontal" className="gap-2.5" data-invalid="true">
          <RadioGroupItem value="both" id="invalid-both" aria-invalid />
          <FieldLabel htmlFor="invalid-both" className="font-normal">
            Both Email & SMS
          </FieldLabel>
        </Field>
      </RadioGroup>
    </FieldSet>
  )
}

API Reference

See the Base UI Radio Group documentation.