Live demo — this example is server-driven; run the showcase locally for the interactive version.

Search input

An input specialized for search — text-input-group with the magnifying-glass icon and an optional clear button. Composition pattern: PF v6 has no dedicated runtime template; the search-input markup is built from text-input-group classes + Alpine for the clear button.

Examples

Basic

Magnifier icon + search input.

With clear button

The X appears once a value is present.

No match

The searched value found nothing — only the clear utility shows, no count badge.

Match with result count

A badge counts matches in the utilities.

Match with navigable options

Previous/next arrows step through matches.

1 / 3

Autocomplete

A pf-v6-c-menu of matching options opens under the input; clicking one fills it.

Autocomplete hint

When one option remains, a disabled pf-m-hint ghost input previews it — Tab accepts the completion.

With submit button

A Search control button submits the query. PF\u2019s "focus via ref" section is a React-ism.

Searched for:

With expandable button

A magnifier button expands into the input and focuses it.

Advanced

A caret opens an attribute form that composes the query string.

Advanced expanded

The advanced attribute panel rendered already open; the caret still toggles it live.

Composable advanced search

The advanced pane is composed by hand from primitives — a raised panel with a form that composes the query back into the search input.

Documentation

Search input structure

Search input is a composition, not a separate runtime template. The markup is:

.pf-v6-c-text-input-group wrapper
Inside: .pf-v6-c-text-input-group__main.pf-m-icon containing the icon span + the <input type="search">
Optional: .pf-v6-c-text-input-group__utilities with the clear button

See the With clear example for the full structure.

Usage

HTMX pairing. The standard server-side search pattern is hx-get="/search" hx-trigger="input changed delay:200ms" hx-target="#results".

Accessibility. Always set aria-label="Search" on the input — there's no visible label.

Edit search-input examples on GitHub