hx components MRadio

HxMRadio

Single-select radio button group. Renders a list of radio buttons from an options source.

const sizes = [
  { value: 's', label: 'Small' },
  { value: 'm', label: 'Medium' },
  { value: 'l', label: 'Large' },
];

// Vertical layout (default)
<HxMRadio $model={form} $field="size" options={sizes} />

// Horizontal with 3 columns
<HxMRadio $model={form} $field="size" options={sizes} direction="dir-x" lanes={3} />

// Async options
<HxMRadio
  $model={form}
  $field="category"
  options={async (search) => fetchCategories(search)}
/>

Props

Prop	Type	Default	Description
$model	HxObject<T>	—	Reactive model
$field	ModelPath<T> | HxDataPath	—	Model field path
options	HxSelectOptions<T>	—	Options source (see Common)
direction	'dir-x' | 'dir-y'	'dir-y'	Layout direction
lanes	number	—	Grid column count, 1–10 (for dir-x layout, ignored when the direction is vertical)
gapX	size token	—	Horizontal gap between options
gapY	size token	—	Vertical gap between options
enterToSwitchValue	boolean	false	Enter key toggles
spaceToSwitchValue	boolean	true	Space key toggles

Keyboard Navigation

Same as HxMCheckbox — arrow key navigation between options, Enter/Space to select.

Native DOM Events

Each option renders a standard radio input. Focus and keyboard are managed at the group level. In practice, individual event listeners are rarely needed — selection is handled by $model/$field binding.

Global Config

import { configHxMRadio } from '@hx/components';
configHxMRadio({ direction: 'dir-y' });

See Also

• HxMCheckbox — multi-select variant
• HxRadio — single radio button