Workplace Learning form
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.
- .m-form__control-group - groups labels, form elements and any other content within a form
- .m-form__group - (CC version) groups labels, form elements and any other content within a form in course creator
- .m-form__label - styles labels
- .m-form__fieldset - required to remove all default fieldset styles set by a browser
- m-form__legend - styles legends (legends are hard to style though, so do not rely on this to be consistent in all browsers)
- m-form__info - Text to help users understand the form and what the fields require
- m-form__form-actions - Spaces the action buttons away from surrounding content.
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.
Renders the form inline -
Renders labels as regular weight text, not bold.
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.
Lighter, less shouty version of .m-form__info