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.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add radio-group

Variants & Examples

Default Radio Group

A group of radio buttons for selecting a single option.

Default

Comfortable

Compact

Code for Default Radio Group

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
2import { Label } from "@/components/ui/label"
3
4export function DefaultRadioGroup() {
5  return (
6    <RadioGroup defaultValue="comfortable">
7      <div className="flex items-center space-x-2">
8        <RadioGroupItem value="default" id="r1" />
9        <Label htmlFor="r1">Default</Label>
10      </div>
11      <div className="flex items-center space-x-2">
12        <RadioGroupItem value="comfortable" id="r2" />
13        <Label htmlFor="r2">Comfortable</Label>
14      </div>
15      <div className="flex items-center space-x-2">
16        <RadioGroupItem value="compact" id="r3" />
17        <Label htmlFor="r3">Compact</Label>
18      </div>
19    </RadioGroup>
20  )
21}

Horizontal Radio Group

Radio buttons arranged horizontally.

Option One

Option Two

Code for Horizontal Radio Group

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
2import { Label } from "@/components/ui/label"
3
4export function HorizontalRadioGroup() {
5  return (
6    <RadioGroup defaultValue="option-one" orientation="horizontal" className="flex space-x-4">
7      <div className="flex items-center space-x-2">
8        <RadioGroupItem value="option-one" id="ho1" />
9        <Label htmlFor="ho1">Option One</Label>
10      </div>
11      <div className="flex items-center space-x-2">
12        <RadioGroupItem value="option-two" id="ho2" />
13        <Label htmlFor="ho2">Option Two</Label>
14      </div>
15    </RadioGroup>
16  )
17}

Props

These are the available props for the Radio Group component:

Prop	Type	Description	Default
defaultValue	string	The value of the radio item that should be checked when initially rendered.	-
value	string	The controlled value of the checked radio item.	-
onValueChange	(value: string) => void	Event handler called when the checked state changes.	-
orientation	"horizontal" \| "vertical"	The orientation of the radio group.	"vertical"
disabled	boolean	Whether the radio group is disabled.	false