HyMenuItemRadio
Usage examples on this page are written for Lit / plain HTML (
<hy-menu-item-radio>). The same component ships asHyMenuItemRadioin@whitespaceux/harmony-react(native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.
A grouped, single-select row inside an hy-menu. Composition wrapper around hy-menu-item that adds checked state, a leading radio-dot glyph, and a change event.
Grouping
Siblings that share the same name form a radio group. The parent hy-menu listens for change, unchecks every other radio in the group, and re-emits an aggregated change event with { selectedValue, name, reason } — matching hy-radio-group's API.
Radios without a name work visually but do not participate in mutual exclusion or the menu-level change event. The hy-menu-group role="radiogroup" pattern is also honored when present.
Examples
Radio rows sharing a name
<hy-menu-item-radio name="zoom" value="zoom-50" label="50%"></hy-menu-item-radio>
<hy-menu-item-radio name="zoom" value="zoom-100" label="100%" checked></hy-menu-item-radio>
<hy-menu-item-radio name="zoom" value="zoom-150" label="150%"></hy-menu-item-radio>Grouped via hy-menu-group radiogroup
<hy-menu-group label="Density" role="radiogroup">
<hy-menu-item-radio value="compact" label="Compact"></hy-menu-item-radio>
<hy-menu-item-radio value="comfort" label="Comfort" checked></hy-menu-item-radio>
</hy-menu-group>API
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
checked | checked | boolean | false | Checked state. |
value | value | string | '' | Identifier used in select / change events. |
name | name | string | '' | Group identifier. Radios sharing a name form a radio group — the parent hy-menu clears siblings on selection and aggregates the change as a menu-level change event. |
label | label | string | '' | Label text. When empty, the default slot is rendered. |
shortcut | shortcut | string | '' | Keyboard shortcut hint. |
disabled | disabled | boolean | false | Disables the item — skipped in keyboard nav, no activation. |
variant | variant | 'default' | 'danger' | 'default' | Visual variant. |
size | size | 'small' | 'medium' | 'medium' | Density variant, forwarded to the inner hy-menu-item. |
active | active | boolean | false | Whether this item currently owns the tab stop in its menu's roving tabindex. Reflected so the modal focus trap can match hy-menu-item-radio[active]. Managed by the parent hy-menu. |
Events
| Event | Detail | Description |
|---|---|---|
change | — | { checked, value, name, reason } when this radio toggles. Stops at the parent hy-menu, which re-emits an aggregated change. |
select | — | Relayed from inner hy-menu-item. |
Slots
| Slot | Description |
|---|---|
default | Default label content when label prop is empty. |
leading | Overrides the default radio-dot glyph. |
trailing | Trailing indicator / shortcut hint. |
CSS Custom Properties
| Property | Description |
|---|---|
--hy-menu-item-radio-glyph-color | Glyph color in the rest state. Defaults to --hy-foreground-brand-rest. |
--hy-menu-item-radio-glyph-color-disabled | Glyph color when the host is disabled. Defaults to --hy-foreground-default-disabled. |
Methods
focus()
Imperative focus — forwards to the inner hy-menu-item.
setTabIndex()
Called by parent hy-menu roving-tabindex logic. Forwards to the inner hy-menu-item and mirrors the tab-stop state on the host's reflected [active] attribute (focus trap discovery + CSS hook).