Help

Radio Group

A component that renders a group of radio buttons using Medusa's design system.

In this guide, you'll learn how to use the Radio Group component.

Radio 1

Radio 2

Radio 3

Was this example helpful?

Usage#

Code
import { RadioGroup } from "@medusajs/ui"

Code
1<RadioGroup>2  <RadioGroup.Item value="1" id="radio_1" />3  <RadioGroup.Item value="2" id="radio_2" />4  <RadioGroup.Item value="3" id="radio_3" />5</RadioGroup>

API Reference#

This component is based on the Radix UI Radio Group primitives.

Examples#

Radio Group with Descriptions#

Radio 1

The quick brown fox jumps over the lazy dog.

Radio 2

The quick brown fox jumps over the lazy dog.

Radio 3

The quick brown fox jumps over the lazy dog.

Was this example helpful?

Controlled Radio Group#

Radio 1

Radio 2

Radio 3

Selected value: 1

Was this example helpful?

Radio Group with a Disabled Item#

Radio 1

Radio 2

Radio 3

Was this example helpful?

Radio Choice Box#

The RadioGroup.ChoiceBox component allows you to show a group of radio buttons, each in a box with a label and description.

Was this example helpful?

Choice Box API Reference#

This component is based on the Radix UI Radio Group Item primitives.

Prop	Type	Default
`label`	`string`	-
`description`	`string`	-
`value`	`string`	-

Was this guide helpful?