Extension: Forms

The forms extension contains default styles for displaying form inputs and related elements in HTML. Check out the the forms demo page to see it in action!

Form layout

The biggest thing the forms extension does is actually turning <label> elements into blocks. The consequence is that you can stack up labels and their inputs in your HTML without any wrapping elements whatsoever and get a decent looking form. But if you have wrapping elements grouping labels and form controls, that's fine, it works that way too!

There's one exception and that is labels that come just after their checkbox or radiobutton—they go inline. And if you really want an inline form there's a helper class form-inline for that.

Spacing

If you find an element in your form having vertical spacing where you don't want it, just add class mt-0. If you want to group some elements or bring one element to a new line with spacing above (like a button), just wrap it in a simple <div>!

Checkboxes & radiobuttons

The position of checkboxes and radiobuttons is adjusted using the baseline-shift-factor, so if you ever find them being misaligned, make sure your $forms-font-stack is correctly registered in the Fonts module.

Buttons

Buttons come in three base variants, with classes:

button-prime
button-plain
button-petty

…all combinable with modifiers for double size:

button-prime button-large
button-plain button-large
button-petty button-large

…as well as modifiers to communicate caution:

button-prime button-destructive
button-plain button-destructive
button-petty button-destructive

…and of course there are variants for focused, active, and disabled states as well that you can see on the forms demo page.

Customization

Should you want to customize the colors, borders, shadows, backgrounds, outlines, padding, transitions, or text-decoration of inputs and button variants there's an abundance of default variables at the top of the extension's source code that you are free to override with your own values before including it. You'll find it in src/extensions/_forms.scss.