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.

Basic Form Group

Disabled State

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

Disabled Form Group

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.

Small Form Group
Medium Form Group
Large Form Group

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.

Disabled Form Group Nesting
Readonly Form Group Nesting
Sized Form Group Nesting

API

Form Group API <i-form-group>
Property Description Type Accepted Default
disabled Sets the state of the form group component as disabled. Boolean true, false false
readonly Sets the state of the form group component as readonly. Boolean true, false false
size Sets the size of the form group component. String sm, md, lg md
inline Sets the form group styling to be inline. Boolean true, false false
validate Determine whether to display the error messages related to the immediate child input. Boolean true, false true