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.

Preview in Figma LLMs

Overview

Design

Code

antuikit's Radio is Ant Design's Radio, installed into your project as a file you own. Radio, Radio.Group and Radio.Button take the same props, merge className and forward a ref, and add nothing else.

There is no emphasis prop: buttonStyle (outline or solid) already does that job. The ref is the one row marked antuikit in the API table below.

Install

npx antuikit@latest init

npx antuikit@latest add radio

The first command sets up AntuikitProvider and the theme tokens, and the second adds this component.

Import

From @/components/ui/radio, never from antd. The file is yours once it is installed, so the import path is a path in your project rather than a package.

import { Radio } from "@/components/ui/radio"

The axes

The enumerated props, and the values each one takes. They match the Figma properties on the Design tab. All of them are on Radio.Group.

optionType: "default" or "button", defaulting to the dot. "button" draws every child as a joined row of buttons, still radios underneath. Radio.Button does the same for one child. On a single <Radio> it warns in development and is ignored.
buttonStyle: "outline" or "solid", defaulting to outline. It does nothing until optionType is "button".
orientation: "horizontal" or "vertical". It wins over the older vertical boolean when both are set.
size takes small, medium or large, and a provider above can set it for a whole form. It only changes the button type: the dot's size comes from the radioSize token.

There is no squircle prop, since the dot is round, and no icons: the dot is drawn in CSS, so the item needs no icon pack.

Flags

The booleans, and where each one is resolved.

disabled resolves in three layers: the child's own value, then the group's, then a surrounding Form or provider. A child overrides the group only by setting it explicitly.
block fills the parent and shares the width between the options. Set it on the group.
vertical is the older spelling of orientation="vertical", kept for compatibility. Pass one of the two.
On a single radio, checked and defaultChecked control it directly. Inside a group they are overridden, because the group derives checked from value instead. skipGroup opts a child out of that context, and autoFocus focuses the input on mount.

Slots

The props that take a node. Use a slot for your own markup before reaching for a descendant selector.

children on a Radio is the option's label, rendered in a span beside the input. It is also what names the option, so an option that paints no text has no name.
children on the group is the list of radios you write by hand. Use it when an option needs more than a label: a description under the word, a price, a Tag.
options is the other way to fill a group, and the two do not combine. A non-empty options replaces whatever you passed as children, without a warning. Its object form reaches label (which takes a node), value, disabled, title, id, className, style, required and its own onChange, and nothing else.

Events

Radio raises no events of its own.

Styling

classNames and styles take the same keys, one per part. Use them before a descendant selector, since the keys stay stable across versions.

<Radio

classNames={{

root: "…",

icon: "…",

label: "…",

}}

A Tailwind class on one of these keys overrides the default style without !important. Writing a component token's CSS variable on the root has no effect, so style the part instead, or set the token in your theme.