Radio Group

A control element used to allow users to make a single selection from a predefined set of mutually exclusive options.

  • Can be controlled or uncontrolled

  • Full keyboard navigation

  • Simplified API

  • Handles invalid appearance

  • Multiple sizes

  • Easy to customize

  • Respects reduce motion with system settings and through props

Pure UI

Installation

Loading...

Usage

// Option #1. Basic usage:
<RadioGroup />

// Option #2. Custom usage:
<RadioGroupRoot>
  <RadioGroupItem>
    <RadioGroupIndicator />
  </RadioGroupItem>
</RadioGroupRoot>

Basic

Custom

Examples

Size

Reduce Motion

Validation

There’s an additional RadioGroupField component built specifically for easy and clean isomorphic form validation. It leverages Conform and Zod, providing a single source of truth for both frontend and backend while preserving native browser validation APIs (Conform works with any valid HTML form and captures form values using the FormData Web API). It also seamlessly integrates with the latest React 19 useActionState hook:

Choose a model

Orientation

Disabled

Custom Styles

API Reference

RadioGroup

PropTypeDefault
size
enum
"default"
invalid
boolean
―
reduceMotion
boolean
false
options*
RadioOption[]
―

Root

PropTypeDefault
size
enum
"default"
invalid
boolean
―
reduceMotion
boolean
false

Support all Radix API

Item

Support all Radix API

Indicator

Support all Radix API

⮠ PrevPagination
Next ⮡Resizable