RadioGroup

Pass options as { value, label, disabled? }. The machine manages arrow keys, roving focus, selection, and form behavior.

import { RadioGroup } from '@manti-ui/react';

const items = [
  { value: 'boiled', label: 'Boiled' },
  { value: 'steamed', label: 'Steamed' },
  { value: 'fried', label: 'Fried', disabled: true },
];

export default function RadioGroupBasic() {
  return (
    <RadioGroup
      label="Cooking method"
      items={items}
      defaultValue="boiled"
      variant="primary"
    />
  );
}

Horizontal layout

Spice levelMildMediumHot

API

Prop	Type	Default	Description
`items`	`RadioGroupItem[]`	—	The options. Each is `{ value, label, disabled? }`.
`label`	`ReactNode`	—	Optional group label.
`variant`	`MantiVariant`	`'primary'`	Active variant when an option is selected.
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial selected value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	—	Called whenever the selected value changes.
`orientation`	`'horizontal' \| 'vertical'`	`'vertical'`	Layout direction.
`name`	`string`	—	Form field name.
`disabled`	`boolean`	—	Disable the entire group.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="radio-group"][data-part="root"]`	The group wrapper.
`label`	`[data-scope="radio-group"][data-part="label"]`	The optional group label.
`item`	`[data-scope="radio-group"][data-part="item"]`	Each selectable option row.
`item-control`	`[data-scope="radio-group"][data-part="item-control"]`	The radio dot rendered for each item.
`item-text`	`[data-scope="radio-group"][data-part="item-text"]`	Each item label.

Tokens

Token	Controls
`--manti-radio-group-gap`	gap
`--manti-radio-group-horizontal-gap`	horizontal gap
`--manti-radio-group-item-gap`	item gap
`--manti-radio-group-control-size`	control size
`--manti-radio-group-dot-size`	dot size
`--manti-radio-group-label-font-size`	label font size
`--manti-radio-group-item-font-size`	item font size

Last updated 13 September 2026