Search field

The custom element is <hui-search-field>.

Overview

A text input with a search icon and a clear control, form-associated so it submits like any other field. It owns no suggestions; a host drives an hx-get from its input event.

Example

Search field

Source

<hui-search-field name="q" placeholder="Search things" aria-label="Search"></hui-search-field>

The Go template that renders it:

<hui-search-field name="q" placeholder="{{ .Placeholder }}" aria-label="{{ .Label }}"></hui-search-field>

API

Attributes4

Attributes
Name	Type	Default	Description
`name`	`string`	`""`	The form field name. Without one the control submits nothing.
`value`	`string`	`""`	The current query. Reflects to the `value` attribute.
`placeholder`	`string`	`"Search"`	Placeholder shown in the input while it is empty.
`disabled`	`boolean`	`false`	Disables the input and the clear button.

Properties4

Properties
Name	Type	Default	Description
`name`	`string`	`''`	Reflects to the `name` attribute.
`value`	`string`	`''`	Reflects to the `value` attribute.
`placeholder`	`string`	`'Search'`	Reflects to the `placeholder` attribute.
`disabled`	`boolean`	`false`	Reflects to the `disabled` attribute.

Events2

Events
Name	Description
`input`	Emitted on the host as the user types and when the clear button is used. It `bubbles` and is `composed`; the internal input's own event is stopped at the boundary.
`change`	Emitted alongside `input` when the value is committed and on clear. It `bubbles` and is `composed`.

CSS custom properties5

CSS custom properties
Name	Default	Description
`--hui-ring`	`oklch(0.62 0.019 323.02)`	Colour of the ring drawn on `[part="field"]` while the input is focused.
`--hui-focus-ring-width`	`3px`	Width of that ring.
`--hui-input`	`oklch(0.62 0.019 323.02)`	Border of the field, and of the invalid field.
`--hui-muted-foreground`	`oklch(0.542 0.034 322.5)`	Colour of the search icon and the clear control.
`--hui-destructive`	`oklch(0.56 0.245 27.325)`	Border of the field while `aria-invalid="true"`.

::part() hooks4

::part() hooks
Name	Description
`field`	The bordered container that draws the focus ring.
`search-icon`	The leading search glyph.
`input`	The internal native `type="search"` input.
`clear`	The trailing clear button; hidden while the value is empty.

States

With a value

With text in it the clear control appears; using it empties the field and emits input, so a filter driven by the field updates.

With a value

Source

<hui-search-field name="q" value="hello" aria-label="Search with value"></hui-search-field>

Disabled

Disabled: the field and its clear control are both out of reach.

Disabled

Source

<hui-search-field name="q" value="locked" disabled aria-label="Disabled search"></hui-search-field>

Server-side mechanics

The server renders a plain <hui-search-field>; it has no children, because the control owns no suggestions. It is form-associated: give it a name and the current query submits under that name, and without one it submits nothing. A host drives an hx-get from the control's synthetic input event to fetch results into a separate region. An hx-swap that replaces the field while it is focused destroys the input and its caret, so swap the results region rather than the field itself.

Accessibility

The clear button has the accessible name "Clear search".
The focus ring is drawn on the whole [part="field"], not on the borderless input inside it.
An aria-invalid="true" host colours the field border with --hui-destructive.

Keyboard

Keyboard
Keys	Action
`Printable characters`	Update the value and emit `input`.
`Tab`	Moves focus from the input to the clear button while it is visible.
`Enter, Space`	Activate the clear button, which empties the field and emits `input` and `change`.

Gotchas

None recorded.