# antuikit / Radio

> Radio. Centers the labels of a vertical `Radio.Button` group, which antd leaves at the start.

Docs: https://antuikit.com/docs/components/radio

## Install

npx antuikit@latest init
npx antuikit@latest add radio

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/radio/basic.md): A single `Radio` with a label, and a `Radio.Group` that builds its choices from `options` so only one can be picked.
- [Group](https://ui.antuikit.com/embed/radio/group.md): Wrap `Radio` children in `Radio.Group` to link them into one choice, with the arrow keys moving between them.
- [Option type](https://ui.antuikit.com/embed/radio/options-types.md): Set `optionType="button"` to draw the same `options` as a row of buttons instead of radio circles.
- [Radio buttons](https://ui.antuikit.com/embed/radio/button-style.md): Use `Radio.Button` children for a segmented row where the selected button gets an outlined highlight, like a view switcher.
- [Solid buttons](https://ui.antuikit.com/embed/radio/button-solid.md): Set `buttonStyle="solid"` on the group to fill the selected button with the primary color instead of outlining it.
- [Button size](https://ui.antuikit.com/embed/radio/button-size.md): Set `size` on the group to `small`, `medium` or `large` to match the buttons to the controls around them.
- [Disabled](https://ui.antuikit.com/embed/radio/disabled.md): Set `disabled` on a single `Radio`, or on one entry in `options` to lock that choice while the rest stay selectable.
- [Vertical](https://ui.antuikit.com/embed/radio/vertical.md): Set `orientation="vertical"` to stack the options one per line, which reads better once there are more than three.
- [Vertical buttons](https://ui.antuikit.com/embed/radio/button-vertical.md): Set `orientation="vertical"` on a group of `Radio.Button` children to stack the buttons into one column.
- [Block](https://ui.antuikit.com/embed/radio/block.md): Set `block` on a button group to stretch it to the width of its container, with the buttons sharing the space equally.
- [With description](https://ui.antuikit.com/embed/radio/with-description.md): Give each `Radio` a title and a line of help text as its label, with the dot aligned to the title.
- [Card group](https://ui.antuikit.com/embed/radio/card-group.md): 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](https://ui.antuikit.com/embed/radio/in-form.md): Use `Radio.Group` inside a `Form.Item` with a `required` rule, so submitting without a choice shows the error message.
- [Pricing plan cards](https://ui.antuikit.com/embed/radio/plan-picker.md): Three pricing plans as selectable cards with features and a Popular tag, and a Continue button that names the chosen plan.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/radio`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Radio` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.