Forms

Building user input

Classes

• mb-form is used on a parent element, typically a form element, but it can be used on anything. It styles label, input, select and textarea elements, keeping them to a common standard close to the browser defaults.
• error-input and error-help are used to style invalid inputs and their related help texts.

Spacing

Form elements and buttons inside mb-form comes without margins. That means any necessary spacing must be added by one of two methods:

1. Using gap utilities to define spacing between the children of a container. Chances are you already have a flex container to lay out the elements, and this is the prefered method as it can have different vertical and horizontal spacing without adding individual margin classes. For checkboxes and radio inputs, use gcl grs. For field inputs, use gcs grm. For single inputs in combination with a button, use gaxs.
2. Using the mb-form--spaced class alongside mb-form to add the old school margin-bottom of 1 rem to form elements and buttons. This can be relevant for simpler forms with just a couple of inputs.

Resources

• Help and information is especially useful in forms.
• Accessibility in forms.

Disabling inputs

Disabled inputs can be removed most of the time or, if the input is always disabled, it can be a text of the output instead. A relevant example is postal code search that fetches the city automatically. Postal code is input, city would then be output.

When we actually have to disable inputs, we use the disabled attribute. This sets the style automatically.