Group

Renderless Input

The group input does not render any output to the DOM. It is used exclusively for structuring data in your form. It is equivalent to an object in JavaScript.

The group input allows you to structure data from child inputs as an object. The group itself outputs no markup by default and can be used in conjunction with any other type of input — including nested groups and lists.

The value of a group input is an object where the keys are the names of the inputs, and the object’s values are each input’s value. In addition to structuring data, groups can determine the validation state, provide initial values, and supply plugins and configuration to all of its children.

An example

<FormKit type="group" name="address">  <FormKit type="text" label="Street address" name="street" />  <FormKit type="text" label="City" name="city" />  <div class="flex gap-4">    <FormKit type="select" label="State" name="state" :options="states" />    <FormKit type="text" name="zip" label="Zip" />  </div></FormKit>

Street address

City

State

Zip

"address": {
  "street": "123 Main St",
  "city": "Anytown",
  "state": "CA",
  "zip": "12345"
}

Validity of children

Groups are always aware of the validation state of their children (including nested children). You can access this data in the context object of the input (context.state.valid).

<h2 class="text-2xl font-bold mb-4">Register</h2><FormKit name="account" type="group">  <template #default="{ state: { valid } }">    <div v-if="!valid" class="not-valid">      Your account details are not complete!    </div>    <div v-else class="valid">It all looks good 👍</div>    <FormKit      label="Username"      name="username"      help="Select a new username"      validation="required|alpha"    />    <FormKit label="Password" name="password" validation="required" />    <FormKit      label="Password"      name="password_confirm"      help="Confirm your password"      validation="required|confirm"    />  </template></FormKit>

Register

It all looks good 👍

Username

Select a new username

Password

Confirm your password

Showing error & validation messages

Even though a group can have validation rules and input errors, it does not include any functionality to show validation messages and errors by default. The group ships no HTML at all. If you’d like to display those errors — you can add the <FormKitMessages /> as a child of the group.

Configuration

Further documentation on the FormKitMessages component can be found on the form documentation page.

Props & Attributes

Prop	Type	Default	Description
`disabled`	`Boolean`	`false`	Disables all the inputs in the group.
Show Universal props
`config`	`Object`	`{}`	Configuration options to provide to the input’s node and any descendent node of this input.
`delay`	`Number`	`20`	Number of milliseconds to debounce an input’s value before the `commit` hook is dispatched.
`dirtyBehavior`	`string`	`touched`	Determines how the "dirty" flag of this input is set. Can be set to `touched` or `compare` — `touched` (the default) is more performant, but will not detect when the form is once again matching its initial state.
`errors`	`Array`	`[]`	Array of strings to show as error messages on this field.
`help`	`String`	`''`	Text for help text associated with the input.
`id`	`String`	`input_{n}`	The unique `id` of the input. Providing an `id` also allows the input’s node to be globally accessed.
`ignore`	`Boolean`	`false`	Prevents an input from being included in any parent (group, list, form etc). Useful when using inputs for UI instead of actual values.
`index`	`Number`	`undefined`	Allows an input to be inserted at the given index if the parent is a list. If the input’s value is undefined, it inherits the value from that index position. If it has a value it inserts it into the lists’s values at the given index.
`label`	`String`	`''`	Text for the `label` element associated with the input.
`name`	`String`	`input_{n}`	The name of the input as identified in the data object. This should be unique within a group of fields.
`parent`	`FormKitNode`	`contextual`	By default the parent is a wrapping group, list or form — but this props allows explicit assignment of the parent node.
`prefix-icon`	`String`	`''`	Specifies an icon to put in the `prefixIcon` section.
`preserve`	`Boolean`	`false`	Preserves the value of the input on a parent group, list, or form when the input unmounts.
`preserve-errors`	`Boolean`	`false`	By default errors set on inputs using `setErrors` are automatically cleared on input, setting this prop to true maintains the error until it is explicitly cleared.
`sections-schema`	`Object`	`{}`	An object of section keys and schema partial values, where each schema partial is applied to the respective section.
`suffix-icon`	`String`	`''`	Specifies an icon to put in the `suffixIcon` section.
`type`	`String`	`text`	The type of input to render from the library.
`validation`	`String, Array`	`[]`	The validation rules to be applied to the input.
`validation-visibility`	`String`	`blur`	Determines when to show an input's failing validation rules. Valid values are `blur`, `dirty`, and `live`.
`validation-label`	`String`	`{label prop}`	Determines what label to use in validation error messages, by default it uses the `label` prop if available, otherwise it uses the `name` prop.
`validation-rules`	`Object`	`{}`	Additional custom validation rules to make available to the validation prop.
`value`	`Any`	`undefined`	Seeds the initial value of an input and/or its children. Not reactive. Can seed entire groups (forms) and lists..

Sections

The group input renders no output to the DOM so there are no sections to display. The group input is a renderless input that is used exclusively for structuring data in your form. It is equivalent to an object in JavaScript.