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

Text input

Single-line input. Renders a pf-v6-c-form-control wrapper around an <input> with type, validation state, prefix-icon, and disabled / readonly modifiers.

Examples

Basic

Default text input with a placeholder.

Disabled

disabled=true emits the disabled HTML attribute plus pf-m-disabled on the form-control wrapper.

Read only

readonly=true — value shows but isn't editable. Adds pf-m-readonly for the muted styling.

Invalid

Pass validated="error" for pf-m-error + the matching status icon. Also sets aria-invalid="true". Available variants: success | warning | error.

With icon

Prefix icon — iconName="fa:magnifying-glass" emits pf-m-icon and renders the SVG inside the form-control.

Input types

Common type variants — email, password, number, date. Type maps directly to the HTML type attribute.

Start truncated

Long values keep their tail visible.

Custom icon with error

A custom icon combined with the error status icon.

Documentation

Text input props

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

* required
Name	Type	Description
* `id`	String	Used for the form-control wrapper id; the inner <input> gets `{id}-field`.
`type`	String	Input type — text, password, email, number, tel, url, search, date, time, etc. Default `text`.
`value`	String	Initial value rendered as the HTML `value` attribute.
`placeholder`	String	HTML placeholder attribute.
`disabled` / `readonly` / `required`	boolean	Standard HTML form attributes — also emit matching `pf-m-*` on the wrapper.
`validated`	`success \| warning \| error`	Validation state — emits `pf-m-{validated}`, renders the matching status icon, and sets `aria-invalid` on error.
`iconName`	String (icon resolver name, e.g. `fa:magnifying-glass`)	Prefix icon — emits `pf-m-icon` and renders the SVG inside the form-control.

Usage

Wrap in a form-group. Standalone text inputs are fine for filter bars and inline editors, but for collected data use the full Form group structure — label + control + helper-text.

Server-driven validation. Don't rely on the browser's native validation popups. Send the input to the server (HTMX hx-post or form submit) and re-render with validated="error" + a helper-text item carrying the message.

Edit text-input.html on GitHub