Form

Example

Form
Admin Form

Live Examples

Workplace Learning form

Description

The form molecule provides a consistent way to display form atoms together. For example labels, fieldsets and action buttons. There are numerous 'Elements' within this 'block' (in regards the BEM syntax) that control all the parts that make up a form.

Elements

Only a subset of the variants have been includes as there are a LOT. Check the code for more things you can tweak on the form module elements.

Variants

.m-form--inline

Renders the form inline -

.m-form__label--regular

Renders labels as regular weight text, not bold.

.m-form__fieldset--pronounced

Adds the grey background required on all Course Creator fieldsets.

.m-form__control-group--inline / .m-form__group--inline

Displays form elements/atoms within this control group in a horizontal line.

.m-form__info--subtle

Lighter, less shouty version of .m-form__info