Radio Group

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

forminteractive

Loading preview...

Installation

npx baseui-cn add radio-group

Usage

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

<RadioGroup defaultValue="default">
  <RadioGroupItem value="default" />
  <RadioGroupItem value="comfortable" />
  <RadioGroupItem value="compact" />
</RadioGroup>

Examples

Basic

A simple radio group.

Loading preview...

With labels

Pair with Field and Label.

Loading preview...

Horizontal

Horizontal layout.

Loading preview...

Disabled

Disabled items.

Loading preview...

API Reference

See the Base UI RadioGroup + Radio documentation for the full API reference, including all props, data attributes, and CSS classes.