Radio Group

StableBase UI

Live preview

smallmediumlarge

Installation

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

This also merges the token layer and installs src/lib/cn.ts plus @base-ui/react. For the manual route — prerequisites, components.json, and app-level setup — see Installation.

Usage

import { RadioGroup } from "@/components/ui/radio-group";

Example

The preview above, with its source. This is the demo module verbatim, so the code and the thing it renders cannot drift apart.

smallmediumlarge

<RadioGroup defaultValue="small" aria-label="Size">
  {options.map((size) => (
    <label key={size} className="flex items-center gap-2 text-sm">
      <Radio value={size} />
      {size}
    </label>
  ))}
</RadioGroup>

API reference

Each part forwards every prop of its Base UI counterpart; the tables list the ones declared on the part itself. See Base UI's reference for the inherited element props.

RadioGroup

PropTypeDefaultDescription

disabledbooleanfalseWhether the component should ignore user interaction.

readOnlybooleanfalseWhether the user should be unable to select a different radio button in the group.

requiredbooleanfalseWhether the user must choose a value before submitting a form.

namestring—Identifies the field when a form is submitted.

formstring—Identifies the form that owns the radio inputs.

valueValue—The controlled value of the radio item that should be currently selected.

defaultValueValue—The uncontrolled value of the radio button that should be initially selected.

onValueChange((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void)—Callback fired when the value changes.

inputRefReact.Ref<HTMLInputElement>—A ref to access the hidden input element.

Accessibility

Behaviour, focus management, and ARIA wiring come from Base UI's Radio Group — see its reference for the full keyboard map.

Source

src/components/ui/radio-group/radio-group.tsx — no next/* imports, so it drops into any React 19 + Tailwind v4 app.

On this page