Holo Radio & Radio Group
<holo-radio-group> is a form-associated custom element that owns the selected value for a set of <holo-radio> children. It manages roving tabindex keyboard navigation (Arrow keys, Home, End) across its options, so only one radio is ever a tab stop at a time.
Live Previews
Section titled “Live Previews”Default
Section titled “Default”<holo-radio-group label="Size" value="medium"> <holo-radio value="small" label="Small"></holo-radio> <holo-radio value="medium" label="Medium"></holo-radio> <holo-radio value="large" label="Large"></holo-radio></holo-radio-group>Disabled
Section titled “Disabled”<holo-radio-group label="Size" value="medium" disabled> <holo-radio value="small" label="Small"></holo-radio> <holo-radio value="medium" label="Medium"></holo-radio></holo-radio-group>API Reference
Section titled “API Reference”holo-radio-group Properties
Section titled “holo-radio-group Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------------ | --------- | ----------- |
| label | label | The accessible label describing the group of radio options. | string | undefined |
| name | name | The form field name submitted with the owning form. | string | undefined |
| value | value | The value of the currently selected holo-radio child. | string | undefined |
| disabled | disabled | If true, the entire group is disabled and non-interactive. | boolean | false |
| required | required | If true, the owning form cannot submit unless a value is selected. | boolean | false |
holo-radio-group Events
Section titled “holo-radio-group Events”| Event | Description | Type |
| ------------ | ---------------------------------------- | --------------------- |
| holoChange | Emitted when the selected value changes. | CustomEvent<string> |
holo-radio Properties
Section titled “holo-radio Properties”| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ------------------------------------------------------------- | --------- | ----------- |
| value | value | The value this radio represents within its owning group. | string | — |
| checked | checked | Whether this radio is selected (managed by the parent group). | boolean | false |
| disabled | disabled | If true, this radio is disabled and non-interactive. | boolean | false |
| label | label | The visible label text for the radio option. | string | undefined |