Examples
Field groups
Expandable and plain __field-groups with header actions. PF\u2019s "Form state" section
is a React state demo of the same markup.
Action group
The canonical submit/cancel row: pf-v6-c-form__group pf-m-action wrapping pf-v6-c-form__actions.
Form state
One central state object backs every field; Submit validates against it and "Show form state" dumps the live values and errors.
Documentation
Form props
Parameters accepted by
{#include components/forms/form ... /}. Model mode: pass
form=<Form> built in Java instead — the Java tab on each example shows the
builder. The Form model's Group entries generate the form-group / label / control
structure; in param mode it is hand-rendered inside the content slot — matching PF
React where FormGroup is its own component.
| Name | Type | Description |
|---|---|---|
* id
|
String |
DOM id on the <form>.
|
horizontal
|
boolean |
Adds pf-m-horizontal — label column to the left of controls. PF React's
isHorizontal.
|
slot content
|
Qute block |
Form children — typically a series of pf-v6-c-form__group blocks wrapping
label + control + helper-text triples.
|
Usage
One Form per logical action. Wrap inputs that submit together in a single
<form> with an HTMX hx-post on a submit button.
Don't nest forms.
Use novalidate. The runtime sets
novalidate on the form element so the browser's native validation UI doesn't fight your
server-driven validation. Render errors via the helper-text pattern.
Horizontal vs. vertical. Vertical works for input-heavy forms (signup, profile). Horizontal compresses vertical space — best for settings panes and read-mostly forms.