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

Text input group

A text input with optional prefix icon and trailing utility area — the building block behind Search input, chip-input fields, and any input that needs an icon + control affordances.

Examples

Basic

Default text input group — just the input wrapper, no decoration.

With icon and utilities

Pass iconName to render a prefix icon (pf-m-icon).

Plain

plain=true drops the border/background — only for ancestors that provide their own; the dashed wrapper shows the extent.

Autocomplete hint

PF renders the suggestion as a disabled pf-m-hint ghost input behind the real one — "apples" completes to "appleseed".

Disabled

disabled=true — pf-m-disabled on the wrapper, disabled on the input.

Filters

Applied filters as removable labels inside the group; Enter adds the typed one.

Filters expanded

The filters group with a long chip list wrapping onto multiple rows; Clear all empties it.

With status

Success and error variants with status icons.

Attribute-value filtering

The menu first offers attribute keys; choosing one switches it to that key's values, and choosing a value adds a "Key: value" label.

Auto-complete search with typeahead

A search field with a typeahead suggestions menu; picking a suggestion turns it into a removable label.

Documentation

Text input group props

Parameters accepted by {#include components/forms/text-input-group ... /}. Model mode: pass textInputGroup=<TextInputGroup> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	Wrapper id.
`placeholder`	String	HTML placeholder attribute on the input.
`iconName`	String (icon resolver, e.g. `fa:magnifying-glass`)	Adds `pf-m-icon` + renders the SVG as a prefix.
`disabled`	boolean	Adds `pf-m-disabled` + disables the input.

Usage

Building block, not a final UX. Text input group is the substrate PF v6 uses for chip inputs, search bars, type-ahead. For a plain text input use Text input; for search use Search input.

Edit text-input-group.html on GitHub