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.

Default

Comfortable

Compact

tsx

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupDemo() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Installation

CLI

bash

npx fivui add radio-group

Manual

Install the following dependencies:

bash

npm install @radix-ui/react-radio-group

Usage

tsx

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

tsx

<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>

Examples

Horizontal

Radio group items arranged horizontally.

Horizontal Radio Group

Radio buttons arranged in a row

Option One

Option Two

tsx

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupHorizontal() {
  return (
    <RadioGroup defaultValue="option-one" className="flex">
      <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>
  )
}

With Description

Radio group with additional description text for each option.

Radio Group with Descriptions

Each option includes helpful description text

All notifications

Receive all notifications from your team and projects.

Direct messages and mentions

Only receive notifications for direct messages and mentions.

Nothing

You will not receive any notifications.

tsx

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

export function RadioGroupWithDescription() {
  return (
    <RadioGroup defaultValue="notifications-all">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="notifications-all" id="notifications-all" />
        <div className="grid gap-1.5 leading-none">
          <Label htmlFor="notifications-all">All notifications</Label>
          <p className="text-xs text-muted-foreground">
            Receive all notifications from your team and projects.
          </p>
        </div>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="notifications-mentions" id="notifications-mentions" />
        <div className="grid gap-1.5 leading-none">
          <Label htmlFor="notifications-mentions">Direct messages and mentions</Label>
          <p className="text-xs text-muted-foreground">
            Only receive notifications for direct messages and mentions.
          </p>
        </div>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="notifications-none" id="notifications-none" />
        <div className="grid gap-1.5 leading-none">
          <Label htmlFor="notifications-none">Nothing</Label>
          <p className="text-xs text-muted-foreground">
            You will not receive any notifications.
          </p>
        </div>
      </div>
    </RadioGroup>
  )
}

API Reference

RadioGroup

Contains all the parts of a radio group.

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the radio item to check.
`defaultValue`	`string`	-	The value of the radio item that should be checked when initially rendered.
`onValueChange`	`function`	-	Event handler called when the value changes.
`disabled`	`boolean`	false	When true, prevents the user from interacting with radio items.

RadioGroupItem

An item in the group that can be checked.

Prop	Type	Default	Description
`value`	`string`	-	The value given as data when submitted with a name.
`disabled`	`boolean`	false	When true, prevents the user from interacting with the item.
`required`	`boolean`	false	When true, indicates that the user must check the radio item before the owning form can be submitted.

External Documentation

Radio Group is built on top of Radix UI Radio Group. For more advanced usage and API details, refer to the official documentation.

View Radix UI Radio Group Documentation