Form controls have global styling defined at the HTML element level.
Most labels and controls are 100% the width of the <form> parent element, unless you specify inline layout.
<input type="text"> is a single-line text field.
Vanilla also styles HTML’s other single-line field types: password, datetime, datetime-local, date, month, time, week, number, email, url, search and tel. For the search type, see Search box.
<textarea> is a multi-line text field.
Note: The attribute readonly disables the input but it still retains a default cursor.
Use the checkbox component to select one or more options. To provide fully featured Vanilla style and behaviour of the checkbox a specific markup structure is needed around the checkbox input (see example below).
To disable the checkbox component, add the disabled attribute to the respective <input type='checkbox'> element.
When placing the checkbox component in padded containers (table cells, some list items), use the .p-checkbox--inline variant. It ensures the checkbox and the label text are properly aligned with other inline text.
To use checkbox component in headings use the .p-checkbox--heading variant of the component to make sure the checkbox and the label text are properly aligned.
When a checkbox requires a state between checked and unchecked, checkbox.indeterminate = true; can be set via JavaScript, which will cause the checkbox appear in an "indeterminate" state.
In cases when JavaScript can't be used for that, set aria-checked="mixed" on checkbox to show "indeterminate" state. Please note that it will only change the visual look of the checkbox, it will not affect its state available to the browser via JavaScript.
Use radio buttons to select one of the given set of options. To provide fully featured Vanilla style and behaviour of the radio button a specific markup structure is needed around the radio button input (see example below).
To disable the radio component, add the disabled attribute to the respective <input type='radio'> element.
When placing the radio component in padded containers (table cells, some list items), use the .p-radio--inline variant of the component to make sure the radio button and the label text are properly aligned with other inline text.
To use radio component in headings use the .p-checkbox--heading variant of the component to make sure the radio button and the label text are properly aligned.
Use the <select> element to create a drop-down list.
Use the multiple attribute to create a multiple select control.
Use the <datalist> element to create drop-down list with text input.
The <input type="range"> allows a user to select from a specified range of values, where the precise value is not considered important.
You can use the <fieldset> element to divide the form into different logical sections.
You can add is-required to <legend> to indicate required fields.
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.
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.
Adding the disabled attribute to an input will prevent user interaction.
Note:
Supplementary help text can be provided for the form fields by adding an element with .p-form-help-text class name. If the help text follows a checkbox or radio button use an additional is-tick-element class name to align help text with the label.
To use help text with a dense input element, add .is-dense to the .p-form-validation__input element.
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.
To create a dense input inside a p-form-validation__select-wrapper, add the .is-dense class to the select wrapper, not the input.
Apply the class .is-required to mandatory input fields. You should also add a legend to the form to be explicit about the meaning of the asterisk.
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:
When using a password field, use this pattern to allow the user to toggle the password visibility.
By default, the form elements are displayed in the light theme. To display them in the dark theme, add the class .is-dark to the input elements.
View example of dark form validation.
Validated form input elements should indicate errors with aria-invalid attribute.
See WCAG Success Criterion 3.3.1 - Using Aria-Invalid to Indicate An Error Field for further information.
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.
You can use forms in React by installing our react-component library and importing Form, Input, PasswordToggle, Textarea, CheckboxInput, RadioInput, Select and MultiSelect components.
See the documentation for our React Form component
See the documentation for our React Input component
See the documentation for our React PasswordToggle component
See the documentation for our React Textarea component
See the documentation for our React CheckboxInput component
See the documentation for our React RadioInput component