Forms

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.

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

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

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

Feedback classes

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

View example of the base form feedback

Fieldset

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

View example of the base form fieldset


Related: * Buttons pattern