Radio Group

Preview

Option 1

Option 2

Option 3

'use client';

import { Label } from '@/registry/san-francisco/ui/label';
import { RadioGroup, RadioGroupItem } from '@/registry/san-francisco/ui/radio-group';

export default function RadioGroupDemo() {
  return (
    <RadioGroup className="w-fit" defaultValue="option-1">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-1" id="option-1" />
        <Label htmlFor="option-1">Option 1</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-2" id="option-2" />
        <Label htmlFor="option-2">Option 2</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-3" id="option-3" />
        <Label htmlFor="option-3">Option 3</Label>
      </div>
    </RadioGroup>
  );
}

Installation

bun

bunx shadcn@latest add @sft-ui/radio-group

Disabled

Selected

Disabled

'use client';

import { Label } from '@/registry/san-francisco/ui/label';
import { RadioGroup, RadioGroupItem } from '@/registry/san-francisco/ui/radio-group';

export default function RadioGroupDemoDisabled() {
  return (
    <RadioGroup className="w-fit" defaultValue="option-1">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-1" id="r-selected" />
        <Label htmlFor="r-selected">Selected</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-2" id="r-disabled" disabled />
        <Label htmlFor="r-disabled">Disabled</Label>
      </div>
    </RadioGroup>
  );
}

API Reference

Built on Base UI Radio Group.

RadioGroup

The root container that manages the selected value.

Prop	Type	Default	Description
`value`	`unknown`	—	The controlled selected value.
`defaultValue`	`unknown`	—	The initial selected value (uncontrolled).
`onValueChange`	`(value: unknown) => void`	—	Callback fired when the selected value changes.
`disabled`	`boolean`	`false`	Disables all radio items in the group.
`name`	`string`	—	The `name` attribute for the underlying radio inputs.
`className`	`string`	—	Additional CSS classes to apply.

RadioGroupItem

An individual radio option within the group.

Prop	Type	Default	Description
`value`	`unknown`	—	The value of this radio item.
`disabled`	`boolean`	`false`	Disables this radio item.
`className`	`string`	—	Additional CSS classes to apply.