Forms

1.

Basic Inputs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Forms: Inputs #1.01
Forms: Selects #1.02
Forms: File Inputs #1.03
Forms: Text Helpers #1.04
Left Text Helper
Center Text Helper
Right Text Helper
We'll never share your email.
We'll never share your email.
We'll never share your email.
Left Badge Helper
Center Badge Helper
Right Badge Helper
Must be 8-20 characters long.
Must be 8-20 characters long.
Forms: Validations #1.05
Looks good!
Please choose a username.
Example invalid custom select feedback
Example invalid custom file feedback

Looks good!
Looks good!
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
Forms: Sizes #1.06

2.

Checkboxes

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Forms: Checkboxes Stacked #2.01
Forms: Checkboxes Inline #2.02
Forms: Checkbox Validation #2.03
You must agree before submitting.
Forms: Checkboxes Custom #2.04
Forms: Checkboxes Custom Inline #2.05
Forms: Checkbox Custom Validation #2.06
Example invalid feedback text

3.

Radio

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Forms: Radio Stacked #3.01
Forms: Radio Inline #3.02
Forms: Radio Custom #3.03
Forms: Radio Custom Inline #3.04
Forms: Radios Custom Validation #3.05
More example invalid feedback text
Configurator
Nav Color
Nav Style