Radio Group

Preview

Option OneThe first choice available.

Option TwoThe second choice available.

Option ThreeThe third choice available.

Selected: option-one

Installation

npx skeci-ui add radio-group

Usage

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

<RadioGroup defaultValue="option-one">
  <RadioGroupItem value="option-one" label="Option One" />
  <RadioGroupItem value="option-two" label="Option Two" />
</RadioGroup>

Variants

Horizontal

One

Two

Three

Disabled Group

One

Two

Props

RadioGroup

Prop	Type	Default	Description
value	string	—	The controlled value of the group.
defaultValue	string	''	The initial value when uncontrolled.
onValueChange	(value: string) => void	—	Callback fired when the value changes.
disabled	boolean	false	Whether the entire group is non-interactive.
orientation	'horizontal' | 'vertical'	'vertical'	The layout direction of the items.

RadioGroupItem

Prop	Type	Default	Description
value	string (required)	—	The value associated with this item.
label	string	—	The label text.
description	string	—	Helper text below the label.
disabled	boolean	false	Whether this specific item is non-interactive.