Radio Group

A set of checkable buttonsâ€”known as radio buttonsâ€”where no more than one of the buttons can be checked at a time.

Installation

›pnpm dlx shadcn@latest add @evolphin/radio-group

Usage

import { Label } from "@/components/ui/label";
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>

Type Definitions

interface RadioGroupProps {
  /** The value of the selected item */
  value?: string;  
RadioGroupProps.value?: string | undefined
The value of the selected item
  /** The default value of the selected item when uncontrolled */
  ?: string;
  /** Event handler called when the value changes */
  ?: (: string) => void;
  /** Whether the radio group is disabled */
  ?: boolean;
}

Examples

Default

Option One

Option Two

API Reference

RadioGroup

Prop	Type	Default	Description
`value`	`string`	-	The value of the selected item.
`defaultValue`	`string`	-	The default value of the selected item when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`disabled`	`boolean`	`false`	Whether the radio group is disabled.
`name`	`string`	-	The name of the radio group.
`required`	`boolean`	`false`	Whether the radio group is required.
`orientation`	`"horizontal" \	"vertical"`	`"vertical"`
`dir`	`"ltr" \	"rtl"`	`"ltr"`
`loop`	`boolean`	`true`	Whether to loop through items when navigating.

RadioGroupItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`required`	`boolean`	`false`	Whether the item is required.

Search

On this page