<hx-search-control> v0.18.0+

The <hx-search-control> block element is a container that augments native browser styles, interaction, and validation for an <input type="search"> element. It is used to build a Search component.

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

<input type="search">

<button class="hxClear">

<hx-search>

<label>
Events: none

Attributes

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

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