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

Form control

.pf-v6-c-form-control is the styling wrapper PF applies around inputs, selects, and textareas — providing borders, padding, focus rings, validation icons, and pf-m-* modifier behavior. The wrapper is rendered automatically by text-input, text-area, and form-select — there's no separate template you'd include directly.

Examples

Basic

Default form-control around a text input.

Validated

Three validation states stacked — pf-m-success, pf-m-warning, pf-m-error.

Disabled / read only

pf-m-disabled vs. pf-m-readonly.

Documentation

Modifiers

There's no standalone form-control runtime template — it's emitted internally by text-input, text-area, and form-select. The wrapper supports these PF v6 modifier classes:

Class	Effect
`pf-m-success`	Green border + check icon. Driven by `validated="success"`.
`pf-m-warning`	Orange border + warning icon. `validated="warning"`.
`pf-m-error`	Red border + exclamation icon. `validated="error"`. Also sets `aria-invalid` on the input.
`pf-m-disabled`	Muted styling, no interaction. `disabled=true`.
`pf-m-readonly`	Soft border, focusable but not editable. `readonly=true`.
`pf-m-icon`	Adds room for a prefix icon. `iconName="..."` on text-input.
`pf-m-textarea`	Multi-line styling. Emitted by text-area automatically.

Usage

You don't include form-control directly. Reach for text-input, text-area, or form-select.

One validated state per field. Don't combine modifiers. Pick the most-actionable state.

Edit form-control.html on GitHub