Radio Group

A set of checkable buttons where no more than one can be checked at a time.

API Reference

Preview

Installation

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio"
<RadioGroup defaultValue="next">
  <Field>
    <RadioGroupItem value="next" />
    <FieldLabel>Next.js</FieldLabel> 
  </Field>
  <Field>
    <RadioGroupItem value="vite" />
    <FieldLabel>Vite</FieldLabel>
  </Field>
  <Field>
    <RadioGroupItem value="astro" />
    <FieldLabel>Astro</FieldLabel>
  </Field>
</RadioGroup>

API Reference

RadioGroup

Root component. Styled wrapper for RadioGroup.Root from Base UI with flex column layout.

RadioGroupItem

Individual radio button. Styled wrapper for Radio.Root from Base UI with built-in indicator.

Examples

For accessible labelling and validation, prefer using the Field component to wrap radio buttons. See the related example: Radio Group field.

Disabled

With Description