<hx-switch-control> v0.24.0+ HelixUI v0.24.0 or later required

The <hx-switch-control> is a container that provides behavior to augment native browser validation capabilities for the custom <hx-switch> element. It is used to build a Switch component.

Permitted Parents: any element that accepts flow content
Permitted Children: in this order:

checkbox <input> element

<label> (wrapper) element

<hx-switch> (facade) element
Events: none

Attributes

Attributes enable declarative configuration of an element, via HTML markup.

hx-changed {Boolean} read-only: Present if descendant <input type="checkbox"> element has emitted a "change" event.
hx-dirty {Boolean} read-only: Present if descendant <input type="checkbox"> element has emitted a "change" or "blur" event.
hx-touched {Boolean} read-only: Present if descendant <input type="checkbox"> element has emitted a "blur" event.

Properties

JavaScript properties enable programmatic access to an element's configuration and state.

controlElement {?HTMLInputElement} read-only: Returns the first <input type="checkbox"> descendant or null if none are found.
toggle {Boolean [false]} read-only: Returns the toggled state of the <hx-switch> element.
switchElement {?HXSwitchElement} read-only: Returns the first <hx-switch> descendant or null if none are found.
isDirty {Boolean [false]} read-only: True if controlElement has emitted a "change" or "blur" event.
wasChanged {Boolean [false]} read-only: True if controlElement has emitted a "change" event.
wasTouched {Boolean [false]} read-only: True if controlElement has emitted a "blur" event.

See Also