Forms

Visit the Form Styleguide page to see all the available elements.

Form validation

You can add validation to any form by using the data-validate="" attribute.


<form data-validate=""></form>

Required validation

Add aria-required="true" and data-error="" to the input to set the field as required.

Don't forget to add data-required="true" to the label to indicate a required field to the user.

Example:
Required field example

Email validation

To validate if an email address is valid use data-pattern="email"

Example:
Email validation example

Custom validation

You can use a custom regex pattern to validate the field.

Example:
Custom validation example

Errors

You can display a general error above the form content. An example would be displaying an error message received from the server.

Example:

Example

Example:
Form example
Choose an Option:
Choose an Option:

Inline Form

Inline forms are one exception to the rule of always using a label with an input . In this case use a combination of aria-label and placeholder to inform users.

Example:
Inline form example

Inline form with icon

Example:
Inline with icon form example

Inline detached form

Example:
Inline detached form example

Use the class big to enlargen the form.

Example:
Big inline detached form example