Skip to content

HyMenuItemCheckbox

A checkable row inside an hy-menu. Composition wrapper around hy-menu-item that adds checked / indeterminate state, a leading check/minus glyph, and a change event.

Follows the same composition pattern as hy-color-sliderhy-slider: this element renders an inner hy-menu-item, forwards base props, listens to its select event to toggle state, and publishes its own change event. The inner select continues bubbling so the parent hy-menu sees the composite as the selected item (target retargeting).

When the consumer slots a leading icon, the default check/minus glyph is suppressed so the consumer icon takes precedence. Checked/indeterminate state is still announced via aria-checked on the host.

Events

  • change - { checked, indeterminate, value, reason } when the checked state changes.
  • select - Relayed from inner hy-menu-item; target retargets to this composite.

Slots

  • default - Default label content when label prop is empty.
  • leading - Overrides the default check/minus glyph.
  • trailing - Trailing indicator / shortcut hint.

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).

Built with Lit. Documented with VitePress.