Radio Group

A group of radio buttons that lets you pick only one option at a time.

Installation

npx shadcn@latest add @scrollxui/radio-group

Usage

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';

<RadioGroup defaultValue='option-one'>
  <div className='flex items-center space-x-2'>
    <RadioGroupItem value='option-one' id='option-one' />
    <Label htmlFor='option-one'>Option One</Label>
  </div>
  <div className='flex items-center space-x-2'>
    <RadioGroupItem value='option-two' id='option-two' />
    <Label htmlFor='option-two'>Option Two</Label>
  </div>
</RadioGroup>

API Reference

Radio Group

A group of radio buttons that lets you pick only one option at a time.

Props

Property	Type	Default	Description
`defaultValue`	string	`—`	Initial selected value for uncontrolled usage. RadioGroup.
`value (group)`	string	`—`	Selected value for controlled usage. RadioGroup.
`onValueChange`	function	`—`	Callback when selection changes. RadioGroup.
`disabled`	boolean	`false`	Disables the entire group and all items. RadioGroup.
`required`	boolean	`false`	Required for form submission. RadioGroup.
`name`	string	`—`	Form field name. RadioGroup.
`asChild`	boolean	`false`	Render a custom root element. Both components.
`id`	string	`—`	Unique identifier. RadioGroupItem.
`value (item)`	string	`—`	The option's value. RadioGroupItem.
`disabled (item)`	boolean	`false`	Disable this specific radio item. RadioGroupItem.
`className`	string	`—`	Custom styles. Both components.
`children`	ReactNode	`—`	Custom element when using asChild. Both components.