Forms

Below is a sample form with examples of the different types of form inputs

Form Header

Text Input:

Second Text Input:

Text Area Example:

Radio buttons example

Item 1

Item 2

Item 3

Checkbox example

Checkbox input 1
Checkbox input 2
Checkbox input 3

Drop-down list example

To add a form to your website, copy the HTML and CSS from the codepen below, add or remove copies of sections based on the number and types of inputs needed for the form, and add the 'required' attribute to any field that needs to have some value on submission.

For form validation, copy the JS from the codepen below, replacing the placeholder values with the name or id values of the form / fields as appropriate, and copying the section indicated by the comments for each form field that needs to be validated.

See the Pen Forms by Tyson Foster (@Foster-Design-System) on CodePen.