Radio Group

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

Installation

npx shadcn@latest add https://scrollxui.dev/registry/radio-group.json 

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

PropertyTypeDefaultDescription
defaultValuestring
Initial selected value for uncontrolled usage. RadioGroup.
value (group)string
Selected value for controlled usage. RadioGroup.
onValueChangefunction
Callback when selection changes. RadioGroup.
disabledbooleanfalse
Disables the entire group and all items. RadioGroup.
requiredbooleanfalse
Required for form submission. RadioGroup.
namestring
Form field name. RadioGroup.
asChildbooleanfalse
Render a custom root element. Both components.
idstring
Unique identifier. RadioGroupItem.
value (item)string
The option's value. RadioGroupItem.
disabled (item)booleanfalse
Disable this specific radio item. RadioGroupItem.
classNamestring
Custom styles. Both components.
childrenReactNode
Custom element when using asChild. Both components.

Built withby Ahdeetai.