Components

Radio Group

A set of radio buttons that allows users to select only one option from a predefined list.

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 for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Radio Group comes packed with several components to enhance functionality and provide a seamless experience.

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

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

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

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.