Forms
Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the <form>
parent element.
Input
An input field where the user can enter data, which can vary in many ways, depending on the type attribute.
View example of an input element
HTML5
We support all HTML5 input types: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, color
, number
, email
, url
, search
and tel
.
Textarea
The <textarea>
tag defines a multi-line text input control.
View example of an input element
Note: The attribute readonly
disables the input but it still retains a default cursor.
Checkbox
Use checkboxes to select one or more options, default checkboxes can appear in three states: selected, unselected and disabled.
View example of the base checkboxes
By default, checkboxes are vertically aligned to the baseline of text wrapped in a label
, h5
, h6
, or p
tag. If you need to align them to other elements, use one of the following classes:
is-h1
, is-h2
, is-h3
, is-h4
, is-h5
, is-muted-heading
, is-muted-inline-heading
, is-inline-label
.
View example of checkboxes aligned to different headings
Radio button
Use radio buttons to select one or more options, our radio buttons can appear in four states: both selected, unselected and disabled.
View example of the base radio buttons
By default, radio buttons are vertically aligned to the baseline of text wrapped in a label
, h5
, h6
, or p
tag. If you need to align them to other elements, use one of the following classes:
is-h1
, is-h2
, is-h3
, is-h4
, is-h5
, is-muted-heading
, is-muted-inline-heading
, is-inline-label
.
View example of the aligned radio buttons
Select
Use the <select>
element to create a drop-down list.
View example of the base selects
Use the multiple
attribute to create a multiple select control.
View example of the base multiple selects
Fieldset
You can use the <fieldset>
element to divide the form into different logical sections.
View example of the base form fieldset
Inline
By applying the class .p-form--inline
and wrapping any form control in .p-form__group
you can change the layout style of any form to be inline.
View examples of form inline patterns
Stacked
By applying the class .p-form--stacked
and wrapping any form control in .p-form__group
you can change the layout style of any form to be stacked.
View examples of form stacked patterns
Disabled
Adding the disabled
attribute to an input will prevent user interaction.
Note:All disabled inputs have an opacity of `0.5` and `not-allowed` cursor on hover.
View example of a disabled input
Validation
To use form validation feedback - which includes feedback messages, icons and border colours - wrap individual input elements in a p-form-validation
and additionally apply the .is-error
, .is-caution
or .is-success
to the wrapper as appropriate.
If your form uses select elements then you will additionally need to wrap only the <select>
element in a wrapper with the class p-form-validation__select-wrapper
to mitigate some of the quirks of this specific HTML element across browsers.
Descriptive text relating to the element’s validation status should use the class p-form-validation__message
.
View example of form validation patterns
Required
By applying the class .is-required
the attribute specifies that an input field must be filled out before submitting the form.
View example of an input required element
Dense form elements
In contexts where vertical space is limited, e.g. inside a table row, you might prefer form elements with reduced vertical padding. Add class .is-dense
to achieve that:
View example of the dense form elements
Import
To import just this base element into your project, copy the snippet below and include it in your main Sass file.
@import 'patterns_forms';
To add form help text or validation into your project, copy either or both snippets below and include it in your main Sass file.
@import 'patterns_form-help-text';
@import 'patterns_form-validation';
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
Design
For more information view the forms design spec, which includes the specification in markdown format and a PNG image.