Edit this page

up.form [up-form-group]
HTML selector

Marks this element as a from group, which (usually) contains a label, input and error message.

You are not required to use form groups to submit forms through Unpoly. However, structuring your form into groups will help Unpoly to make smaller changes to the DOM when working with complex form. For instance, when validating a field, Unpoly will re-render the closest form group around that field.

By default Unpoly will also consider a <fieldset> or <label> around a field to be a form group. You can configure this in up.form.config.groupSelectors.


Many apps use form groups to wrap a label, input field, error message and help text:

<form up-validate>
  <div up-form-group>
    <label for="email">E-mail</label>
    <input type="text" name="email" id="email">
  <div up-form-group>
    <label for="password">Password</label>
    <input type="text" name="password" id="password">
    <div class="error">Must be 8 characters or longer</div>

The form above also uses the [up-validate] attribute to validate form groups after changing a field:

  • After changing the E-Mail field, Unpoly will validate the [up-form-group]:has(#email) target.
  • After changing the Password field, Unpoly will validate the [up-form-group]:has(#password) target.