Radio Group

Select one from a set, like choosing your favorite pizza topping; only one can win, ensuring clear choices.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

A set of round buttons where you can select only one option from the group.

Features

Installation

If you hit any issues, make sure you check out the installation guide here.

Composed Components

When you plug this component from the CLI, it autoloads all the composed components. No need to toss 'em in one at a time.

The Radio Group's decked out with several components to make it bangin'.

Field

Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Orientation

By default, the radio group is vertically oriented. You can change it to a horizontal orientation by using the orientation prop.

Payment Method

Without Label

The label is optional. You can omit it if not needed.

Parent Description

Add a description to the radio group by passing the description prop.

Shipping Method
Select your preferred shipping method for the delivery of your items.

Children Description

Add descriptions to individual radio options using the description prop.

Invalid

When the radio group is in an error state, it cannot be edited.

Features

Controlled

You can control the radio group value using the value prop.

Features
You have selected:

Uncontrolled

You can control the radio group value using the defaultValue prop.

Features

Disabled

When the radio group is disabled, it cannot be interacted with.

Features