import { ComponentExample } from "@/components/ComponentExample" import { ComponentReference } from "@/components/ComponentReference"

export const metadata = { title: Radio Group, }

{metadata.title}

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.

Usage

import { RadioGroup } from "@medusajs/ui"

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

API Reference

Examples

Radio Group with Descriptions

Controlled Radio Group

Radio Group with a Disabled Item

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.

Choice Box API Reference

<ComponentReference mainComponent="RadioGroup" componentsToShow={[ "RadioGroup.ChoiceBox" ]} hideFeedback />