Radio, Asgard Docs

Inputs & forms

Pick exactly one of a few options.

Radio provides a single radio button input, typically used within a RadioGroup for mutually exclusive selection.

Key features:

RadioGroup wrapper for consistent layout and spacing
Semantic coloring and three sizes
Configurable labelPosition (left or right)
Disabled state per radio button

Loading preview…

When to use it

A small set of mutually-exclusive choices
Plan / tier selection
Yes / no / maybe style questions
Label on either side in dense forms

Properties

Prop	Type	Default	Description
`checked`	`boolean`	—	Whether this radio button is currently selected.
`onChange`	`(checked: boolean) => void`	—	Callback fired when the radio selection state changes. The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`label`	`string`	—	Text label displayed next to the radio button.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	Controls the size of the radio button.
`type`	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	—	Semantic color type applied to the radio button.
`disabled`	`boolean`	`false`	Disables the radio button, preventing user interaction.
`labelPosition`	`'left' \| 'right'`	`'right'`	Controls whether the label appears to the left or right of the radio button.

Notes

Always use RadioGroup to wrap related Radio buttons so that only one can be selected at a time.
RadioGroup handles layout and spacing; selection logic is managed via individual checked and onChange props.

Presets