Forms


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.

Single-line text field

<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.

Multi-line text field

<textarea> is a multi-line text field.

Note: The attribute readonly disables the input but it still retains a default cursor.

Checkbox

New

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 respecitve respective <input type='checkbox'> element.

Inline checkbox

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.

Heading checkbox

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.

Deprecated base checkboxes

Deprecated

The base element styling for checkbox inputs (<input type="checkbox">) outside of the .p-checkbox component is now deprecated and will be removed in a future version of Vanilla framework.

This applies also to all modifier classes on checkbox elements, such as is-h1, is-h2, is-h3, is-h4, is-h5, is-muted-heading, is-muted-inline-heading, is-inline-label, or is-table-header.

Please refer to the tick elements comparison example to find equivalent usage of new .p-checkbox component.

Radio button

New

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 respecitve <input type='radio'> element.

Inline radio button

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.

Heading radio button

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.

Deprecated base radio buttons

Deprecated

The base element styling for radio inputs (<input type="radio">) outside of the .p-radio component is now deprecated and will be removed in a future version of Vanilla framework.

This applies also to all modifier classes on checkbox elements, such as is-h1, is-h2, is-h3, is-h4, is-h5, is-muted-heading, is-muted-inline-heading, is-inline-label, or is-table-header.

Please refer to the tick elements comparison example to find equivalent usage of new .p-radio component.

Select

Use the <select> element to create a drop-down list.

Use the multiple attribute to create a multiple select control.

Range

New

The <input type="range"> allows a user to select from a specified range of values, where the precise value is not considered important.

Fieldset

You can use the <fieldset> element to divide the form into different logical sections.

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.

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.

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.

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.

Required

By applying the class .is-required the attribute specifies that an input field must be filled out before submitting the form.

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:

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.