hx components Radio

HxRadio / HxWithCheckRadio

Single radio button bound to a model field.

HxWithCheckRadio adds validation (see WithCheck).

<HxRadio $model={form} $field="gender" values={['male', 'female']} text="Male" />

// Allow deselect by clicking the already-checked radio
<HxRadio
  $model={form} $field="option"
  values={['A', undefined]}
  allowUnchecked
  text="Option A"
/>

Props

Prop	Type	Default	Description
$model	HxObject<T>	—	Reactive model
$field	ModelPath<T> | HxDataPath	—	Model field path
values	[checkedVal, uncheckedVal, checkFn?]	[true, false]	The 1st value = checked, 2nd = unchecked. Optional 3rd element is a (modelValue) => boolean function that decides whether the model value counts as checked
allowUnchecked	boolean	false	Allow deselecting by clicking an already-checked radio
text	ReactNode	—	Label text beside the radio button
enterToSwitchValue	boolean	false	Enter key toggles
spaceToSwitchValue	boolean	true	Space key toggles

Native DOM Events

Same practical guidance as HxCheckbox: $model/$field binding is usually sufficient. onChange available if extra side-effects are needed.

Global Config

import { configHxRadio } from '@hx/components';
configHxRadio({ spaceToSwitchValue: true, allowUnchecked: false });