<hx-search-control> v0.18.0+ HelixUI v0.18.0 or later required

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:
  1. <input type="search">
  2. <button class="hxClear">
  3. <hx-search>
  4. <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