Radio Group

A set of mutually exclusive options where only one can be selected at a time.

Default

Comfortable

Compact

Radio Group

Installation

pnpm dlx stera-ui@latest add radio-group

Composition

Use the following composition to build a RadioGroup:

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Examples

With Descriptions

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

Radio with Description

Choice Card

Wrap an entire Field in FieldLabel to render each option as a clickable card. The selected card highlights automatically via FieldLabel's built-in checked-state styling.

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

Radio Choice Card

In a Fieldset

Use FieldSet and FieldLegend to group radio items with an accessible legend.

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

Radio Fieldset

Disabled

Option 2

Option 3

Radio Disabled

API Reference

Built on Base UI's Radio Group and Radio primitives — see the full API reference there.

RadioGroup

Built on Base UI's RadioGroup primitive.

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value: string) => void`	—
`disabled`	`boolean`	`false`
`name`	`string`	—
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`

RadioGroupItem

Prop	Type	Default
`value`	`string`	—
`disabled`	`boolean`	`false`