Form Group

Form groups are the easiest way to add structure to form elements.

Example

The <i-form-group> component is a wrapper that provides proper grouping of labels, input, help text, and form validation messaging. By default, form groups add a margin-bottom to provide spacing between form groups.

Disabled State

Setting a form group as disabled will cause all of its child inputs to be disabled.

Sizes

You're able to use the size modifier to control the size of the components inside your <i-form-group>, using one of the available sizes: sm, md, and lg. The default size is set to md.

All of the components inside the <i-form-group> will inherit the parent form group's size.

Form Group Nesting

You can nest form groups in order to control the disabled, readonly and size properties of multiple inputs at once. All the child inputs of the parent form group will inherit the property.

Component API

Here you can find a list of the various customization options you can use for the form group components as props, as well as available slots.

Sass Variables

Here you can find a list of the Sass variables you can use for the form group component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.