Radio Group

Installation

bunx @prototyperco/cli add radio-group

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/radio-group.json

npx shadcn@latest add https://prototyper-ui.com/r/radio-group.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/radio-group.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/radio-group.json

This will add the following files to your project:

components/ui/radio-group.tsx

Usage

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

<RadioGroup>
  <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
  <RadioGroupItem value="option-2">Option 2</RadioGroupItem>
  <RadioGroupItem value="option-3">Option 3</RadioGroupItem>
</RadioGroup>;

Anatomy

<RadioGroup>
  <RadioGroupItem />
  <RadioGroupItem />
  <RadioGroupItem />
</RadioGroup>

Sub-component	`data-slot`	Purpose	Required
`RadioGroup`	`radio-group`	Root container, manages selection state	Yes
`RadioGroupItem`	`radio-group-item`	Individual radio button with built-in indicator	Yes
Indicator	`radio-group-indicator`	Selection dot (internal element managed by `RadioGroupItem`, not composable)	—

Examples

Description

Disabled

Disabled Individual

Orientation

Read Only

Reusable

Validation

Styling

Data Slots

Use data-slot attributes to target specific parts of the radio group:

Slot name	Element
`radio-group`	Root container for all radio items
`radio-group-item`	Individual radio button circle
`radio-group-indicator`	The selection dot inside the circle

Customization Examples

/* Make radio items larger */
[data-slot="radio-group-item"] {
  @apply size-5;
}

/* Custom checked color */
[data-slot="radio-group-item"] {
  @apply data-checked:bg-green-600 data-checked:border-green-600;
}

{
  /* Override layout via className */
}
<RadioGroup className="flex flex-row gap-4">
  <RadioGroupItem value="a">A</RadioGroupItem>
  <RadioGroupItem value="b">B</RadioGroupItem>
</RadioGroup>;

API Reference

RadioGroup

Root container that manages which radio item is selected.

Prop

Type

All Base UI RadioGroup props are forwarded via ...props.

RadioGroupItem

An individual radio button with a built-in selection indicator.

Prop

Type

All Base UI Radio props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`ArrowDown`	Moves focus and selection to the next radio item
`ArrowRight`	Moves focus and selection to the next radio item
`ArrowUp`	Moves focus and selection to the previous radio item
`ArrowLeft`	Moves focus and selection to the previous radio item
`Tab`	Moves focus into / out of the radio group

ARIA Attributes

RadioGroup renders with role="radiogroup" via Base UI.
Each RadioGroupItem renders with role="radio".
aria-checked is set to true on the selected item and false on others.
aria-disabled is set when the group or an individual item is disabled.
aria-readonly is set when the group is read-only.
aria-required is set when the group is required.
Screen readers announce each radio item label and its selected/unselected state.

Compose

This component is available in @prototyperco/compose.

Catalog Definition

radio-group.catalog.ts

import { z } from "zod";
import { defineComponent } from "@prototyperco/compose/catalog";

export default defineComponent({
  description:
    "A group of radio buttons for selecting a single option from a list",
  props: z.object({
    label: z.string().optional().describe("Label for the radio group fieldset"),
    options: z
      .array(
        z.object({
          label: z.string().describe("Display label for the option"),
          value: z.string().describe("Value of the option"),
        }),
      )
      .describe("Available radio options"),
    value: z
      .string()
      .optional()
      .describe("Currently selected value (bindable)"),
    orientation: z
      .enum(["vertical", "horizontal"])
      .optional()
      .describe("Layout direction of the radio buttons"),
    disabled: z
      .boolean()
      .optional()
      .describe("Whether the radio group is disabled"),
  }),
  events: ["change"],
  example: {
    label: "Select a plan",
    options: [
      { label: "Free", value: "free" },
      { label: "Pro", value: "pro" },
      { label: "Enterprise", value: "enterprise" },
    ],
    value: "free",
  },
});

Example Spec

{
  "root": "planPicker",
  "elements": {
    "planPicker": {
      "type": "RadioGroup",
      "props": {
        "label": "Select a plan",
        "options": [
          { "label": "Free", "value": "free" },
          { "label": "Pro", "value": "pro" },
          { "label": "Enterprise", "value": "enterprise" }
        ],
        "value": "free"
      },
      "$bindState": { "path": "/selectedPlan", "event": "change" }
    }
  }
}

Learn more in the Compose documentation.

Radio Group

On this page

Radio Group

On this page