Radio Group

Overview

Use Radio Group when the user must choose one option from a set.

Radio groups are useful for plans, visibility, shipping speed, sort order, and settings where choices are mutually exclusive.

Anatomy

A radio group has a group label, radio items, item labels, optional descriptions, and selection state.

Behavior

Show all important options when the list is short. Use Select when the list is long or when space is limited.

Accessibility

Group radio items with a clear label. Each item should have its own label, and keyboard users should be able to move through options with arrow keys.

Installation

npx love-ui@latest add radio-group

Usage

import { Label } from "@/components/ui/label"
import { Radio, RadioGroup } from "@/components/ui/radio-group"

<RadioGroup defaultValue="next">
  <Label>
    <Radio value="next" /> Next.js
  </Label>
  <Label>
    <Radio value="vite" /> Vite
  </Label>
  <Label>
    <Radio value="astro" /> Astro
  </Label>
</RadioGroup>

Examples

The examples show disabled, described, card-style, and form-connected radio groups.

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

Disabled

With Description

Card Style

Form Integration