Vanilla framework documentation


Vanilla form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the <form> parent element.

View example of a base form

Input elements

View example of an input element

HTML5 elements

Vanilla supports all HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, color, number, email, url, search and tel.


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 and radio button

Use checkboxes and radio buttons to select one or more options.

View example of the base checkboxes

View example of the base radio buttons


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

Disabled state

Adding the [disabled="disabled"] attribute to an input will prevent user interaction. All disabled inputs have an opacity of 0.5 and not-allowed cursor on hover.

View example of a disabled input

Validation classes

Applying the classes .is-error, .is-caution or .is-success to an input will style that element differently to provide visual feedback in case there is an error, caution or success notification related to the element.

View example of form validation patterns


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

View example of the base form fieldset