Radio

A single choice from a set, with every option visible at once. A group that shows its options instead of hiding them in a field.

Basic

A single Radio with a label, and a Radio.Group that builds its choices from options so only one can be picked.

Group

Wrap Radio children in Radio.Group to link them into one choice, with the arrow keys moving between them.

Option type

Set optionType="button" to draw the same options as a row of buttons instead of radio circles.

Radio buttons

Use Radio.Button children for a segmented row where the selected button gets an outlined highlight, like a view switcher.

Solid buttons

Set buttonStyle="solid" on the group to fill the selected button with the primary color instead of outlining it.

Button size

Set size on the group to small, medium or large to match the buttons to the controls around them.

Disabled

Set disabled on a single Radio, or on one entry in options to lock that choice while the rest stay selectable.

Vertical

Set orientation="vertical" to stack the options one per line, which reads better once there are more than three.

Vertical buttons

Set orientation="vertical" on a group of Radio.Button children to stack the buttons into one column.

Block

Set block on a button group to stretch it to the width of its container, with the buttons sharing the space equally.

With description

Give each Radio a title and a line of help text as its label, with the dot aligned to the title.

Card group

Put each Radio in a Card that gets a primary border when selected, for choices that need a sentence each, like payment methods.

In a form

Use Radio.Group inside a Form.Item with a required rule, so submitting without a choice shows the error message.

In context

The component inside real screens, with the components it usually sits beside.

Pricing plan cards

Three pricing plans as selectable cards with features and a Popular tag, and a Continue button that names the chosen plan.

API Reference

Radio
Radio's props, which Radio.Button takes too. Rows marked antuikit in the Version column are added by the kit.
Radio.Group
Radio.Group's props. Rows marked antuikit in the Version column are added by the kit.
CheckboxOptionType
CheckboxOptionType's props.