Pattern Library

Forms

Forms are intsrumental to how users provide information, access content, and engage with the online community at large. Forms can be difficult to use for all users, but creating accessible usable forms can make this interaction easier for everyone. Usable and accessible forms make the interactive conversation with users a more enjoyable experience for all. Here are some tips to improve the user experience (Usable + Accessible) of forms.

Use top aligned labels to reduce the completion times of forms.
Try to avoid optional fields, only ask for what is necessary for the completion of the form.
Use simple vertical form layouts. From an accessibility standpoint this is ideal. It helps users with limited vision to easily scan the content of the form. It is also ideal for mobile forms as well.
When possible, use the field length as an affordance. The length of an input field should be in proportion to the amount of information expected in the field.
Use the “Required” label to denote required fields.
Auto-focus the first input field in your form. Auto-focusing lets the user know where to start while reducing the number of interactions needed to complete the form.
Every form input and control needs a label, also known as an "accessible name."
Try to minimize the occurance of errors, but when they do occur communicate clearly and provide actionable remedies to correct the errors.

Text Input

Text inputs allow users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines. They are well suited for situations where the user's input is fairly unpredictable and there could be a wide variability in the user's answers. Don't use this form component when users have to choose from a specific set of options.

Best Practices

Use native HTML form controls. They are accessible by default with all assistive technologies, and are semantically correct: <input type="text">.
Labels must be visible for each form control at all times. A visible label is simply text that is in proximity to the form control that it is representing.
Use labels for every input and make the for=""and id="" values match. IDs must be unique on each page, only one label can be associated to each unique form element.
As an alternative, you can also put the input element inside the label if you don’t want to use the for="" attribute, or you don’t want to use an id="" for the input.
Labels SHOULD be adjacent to their corresponding element both visually and in the DOM.
Make required fields obvious.
Wait to validate. Only show error validation messages or stylings after a user has interacted with a particular field.
Error messages MUST describe the error in enough detail so that users know how to fix them.
For accessible form submission errors:
- Set invalid fields to aria-invalid="true".
- Move focus to the first field with an error.
- Ensure error messages are associated with form fields using aria-describedby so that screen reader users know how to fix the problem.
Consider the mobile usage. Set HTML input types to show the correct keypad:
- input type="text" displays the mobile device’s normal keyboard.
- input type="email" displays the normal keyboard and '@' and '.com'.
- input type="tel" displays the numeric 0 to 9 keypad.
- input type="number" displays a keyboard with numbers and symbols.
- input type="date" displays the mobile device’s date selector.
- input type="datetime" displays the mobile device’s date and time selector.
- input type="month" displays the mobile device’s month and year selector.

HTML Code Snippet

CSS Code Snippet

/* Form components */

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea  {
  border: 2px solid #58068c;
  border-radius: 3px;
  padding: 8px 16px;
  background: #fff;
  font-size: 1em;
  margin: 0 0 20px 0
}


label {
  color: #353535;
  display: block;
  cursor: pointer;
  font-weight: 500;
  padding: 5px 0;
  margin: 0;
}


fieldset, legend {
	margin: 0;
}

legend {
	
	font-size: 1.1em;
	font-weight: 600;
}


.srch-container {
	display: inline-block;
	margin: .5em 0;
}

.srch-container input[type="search"] {
	border: 2px solid #58068c;
	border-radius: 3px;
	padding: 8px 16px;
  	background: #fff;
  	font-size: 1em;
	margin: 0 .3em 0 0;
}

.srch-container button {
	background: #58068c;
	color: #fff;
	padding: 10px 20px;
	line-height: 1.6;
	border-radius: 3px;
	border: none;
}

.error-message {
	color:#b50909 !important;    
	display: block;
	font-weight: 500;
	position: relative;
	top: -10px;
}

.error-icon {
	color:#b50909 !important;
	position: relative;
	top: 7px;
	padding-right: 2px;
}

.input-error {border: 3px solid #b50909 !important; margin-bottom: 8px !important; }

Checkboxes

Checkboxes allow users to select one or more options from a visible list. It's best to consider a radio button when a user can only select one option from a list.

Best Practices

Group related form elements with a fieldset element and describe the group with a legend.
The fieldset surrounds the entire grouping of checkboxes or radio buttons.
The legend provides a description for the grouping.
Use the label as a target. Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option.
Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive.

HTML Code Snippet

CSS Code Snippet

/* Begin Styled checkbox */
.checkbox {
	margin: -1em 0;
}

.checkbox.column {
  margin-top: -1.5rem;
  padding: 0 1rem 1rem; }
  .checkbox.column label {
    display: block; }

.checkbox input[type='checkbox'] {
  opacity: 0; }


.checkbox label {
  position: relative;
  padding: 0 3rem 0 2rem; }

.checkbox label::before,
.checkbox label::after {
  position: absolute;
  content: '';
  display: inline-block; }

.checkbox label::before {
  height: 22px;
  width: 22px;
  left: 0;
  top: 1px;
  background: #fff;
  border: 2px solid #353535;
  border-radius: 3px;
}

.checkbox label::after {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 14px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.checkbox input[type='checkbox'] + label::after {
  content: none; }

.checkbox input[type='checkbox']:checked + label::after {
  content: ''; }

.checkbox input[type='checkbox']:checked + label::before {
  background: #58068c; }

.checkbox input[type='checkbox']:focus + label::before {
  outline: 3px solid #1ca2b0 !important;
  outline: auto 5px -webkit-focus-ring-color; }

/* End Styled checkbox */

Radio Buttons

Radio buttons are a great form element choice for when users need to select only one option out of a set of mutually exclusive choices.

Best Practices

Group related form elements with a fieldset element and describe the group with a legend.
The fieldset surrounds the entire grouping of checkboxes or radio buttons.
The legend provides a description for the grouping.
Use the label as a target. Users should be able to tap on or click on either the text “label” or the radio button to select or deselect an option.
Some assistive technology reads the legend text for each fieldset, so it should be brief and descriptive.

Conventional radio buttons

Option 1 Option 2 Option 3

Horizontal segmented controls

Option 1 Option 2 Option 3

HTML Code Snippet

CSS Code Snippet

/* Begin Styled radio button */

.radio.column {
  margin-top: -1rem;
  padding: 0 1rem 1rem; }
  .radio.column label {
    display: block; }

.radio input[type='radio'] {
  opacity: 0; }

.radio label {
  position: relative;
  padding: 0 3rem 0 2rem; }

.radio label::before,
.radio label::after {
  position: absolute;
  content: '';
  display: inline-block; }

.radio label::before {
  height: 22px;
  width: 22px;
  left: 0;
  top: 1px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #353535; }

.radio label::after {
  left: 4px;
  top: 5px;
  width: 13px;
  height: 13px;
  border: 7px solid #58068c;
  border-radius: 50%; }

.radio input[type='radio'] + label::after {
  content: none; }

.radio input[type='radio']:checked + label::after {
  content: ''; }

.radio input[type='radio']:focus + label::before {
  outline: 3px solid #1ca2b0 !important;
  outline: auto 5px -webkit-focus-ring-color; }

/* End Styled radio button */



/* Segmented Control */

.segmented_c {
	margin-bottom: .5em;
}

.segmented_c .btn.btn-secondary {
    color: #58068c;
    background-color: #fff;
	margin-right:0 !important;
	padding: 9px 20px;
}


.segmented_c .btn-secondary:not(:disabled):not(.disabled).active {
	outline: 3px solid #1ca2b0;
	background: #58068c;
	color: #fff;
}


.segmented_c .btn-secondary.focus, .segmented_c .btn-secondary:focus {
	outline: 3px solid #1ca2b0;
	box-shadow:0;
}

/* End Segmented Control */

Select Lists

The HTML <select> tag is used to create a drop down list of options, which appears when clicking on the form element and allows the user to choose one of the options. Select lists can be somewhat unwieldy, especially on mobile. They are difficult to navigate, they hide options by default, they don't support hierarchies, and they only enable selection not editing. If your list of options has less than 7 options, consider using radio buttons instead. You can also use a text field with auto-complete if you have more than 15 options in a list.

Best Practices

Use sparingly. Use the dropdown component only when a user needs to choose from about seven to 15 possible options and you have limited space to display the options.
Use good defaults. When you know most users will pick a particular option, make it the default: <option selected="selected">Default</option>.
Always use a label. Make sure your dropdown has a label.
On mobile consider other UI components first. Segemented controls and steppers are good alternatives on mobile devices.

Label for select list

HTML Code Snippet

CSS Code Snippet

/* Custom select */

.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  margin-left: -2px; }

.select select {
  display: inline-block;
  cursor: pointer;
  padding: 10px 45px 10px 10px;
  border: 2px solid #58068c;
  background: #fff;
  color: #353535;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 1rem;
  border-radius: 3px;
  }

.select select:focus {
	outline: 3px solid #1ca2b0;	
}
  .select select:hover, .select select:focus {
    color: #464646;
    background: #fff; }
  .select select:disabled {
   color: #353535;
    pointer-events: none; }
  .select select:hover ~ .select__arrow,
  .select select:focus ~ .select__arrow {
    border-top-color: #464646; }
  .select select:disabled ~ .select__arrow {
    border-top-color: #f4f4f4; }

.select__arrow {
  position: absolute;
  top: 55px;
  right: 15px;
  width: 2px;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 10px 8px 0;
  border-color: #58068c transparent transparent; 
}

/* Custom Select Ends */

Buttons

There are three types of buttons:

submit — Submits the current form data.
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else.

Use buttons for the most important actions you want users to take on your site, such as Form Submissions, Download, Sign up or Log out.

Best Practices

Style the button most users should click in a way that distinguishes it from other buttons on the page.
Make sure buttons look clickable.
Buttons should display a visible focus state when users tab to them.
Use standard semantic markup. Avoid using <div> or <img> tags to create buttons.
Avoid using too many buttons on a page.
Keep button text short. Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View or Sign up).
Lead with a verb. Make the first word of the button’s text a verb.
Use <button> when you can, but it is possible to use other elements as long as you add Aria role="button" and add JavaScript to replicate the button functionality.