Semantic Forms

A pattern library of forms based on semantic HTML enhanced with a modern UX.

Table of Contents

High flow (JavaScript enabled) styling
Semantic form tables
Low flow (JavaScript disabled) styling
Non-form related HTML elements

High flow (JavaScript enabled) styling

Name
Prefilled field
No placeholder
Password field: Password should be at least 8 characters long.
Don't show password field: Password should be at least 8 characters long.
Customize clear/show buttons: Password should be at least 8 characters long.
Input with button

Single form input

data-max-content text input
data-max-content select

Inputs

Email field
Telephone field
URL field
Search field
No float label
Number
Input with label help text: Some help text
Input with help icon
Required input with help icon
Invalid field
Valid field
Required field
Required field (no asterisk)
Required field (custom title)
Disabled input
Disabled input w/ value
Color field
Date field
Time field
Datetime-local field
Month field
Week field
File field
Input with button: Some help text that should span the entire width of the input/button combo.
Range field
Range value

Selects

Select box: Some help text regarding the select box
Required select box
Required select box (no asterisk)
Select with button
Multiple select

Other inputs

Textarea
Textarea (prefilled): Some prefilled content... Some help text regarding the textarea with some really long text that should overflow and wrap
Textarea: Row 1 Row 2 Row 3 Row 4 This textarea has the data-max-rows set to 3, so the textarea will not expand past 3 rows.
Disabled autosize textarea: Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 This textarea element has the data-disable-autosize attribute applied, and has rows set to 5.
Auto-grow textarea: Start typing to see me grow
Auto-grow input

Alignment classes

align-start
align-center
align-end

align-start
align-center
align-end

Keyboard shortcuts

Default Input focus
Ctrl Input focus
Alt Input focus
Meta Input focus
Number focus
Textarea focus: Special character keyboard shortcuts also require Shift to be pressed.
Date focus: Hover over these inputs to see the keyboard shortcut
Color focus
Range focus
Select focus

Tables

Table with inputs and buttons

Table Title
Column 1	Column 2	Column 3
1		Link button 1
2		Link button 2
3		Link button 3

Table using `colgroups` to define column width

Table Title
Column 1	Column 2	Column 3
20%	50%	30%

Nested fieldsets

Fieldset 1

Input

Here is some subtext.

Input 2

Here's some small subtext.

Input 3

Here's some bold subtext.

Input 4

Here is some subtext.

Here is some more subtext.

Fieldset 2A

Input 1
Input 2
Select

Fieldset 3A

Input A
Input B
Input C
Input D

Fieldset 3

Input A
Input B
Input C
Input D

Fieldset 2B

Input 1
Input 2
Select

Detail elements

Detail element

Detail input
Detail input
Detail input
Detail input

Another detail element with a nested fieldset

Detail input

Nested fieldset

Nested fieldset input

Buttons

Standard button
Input button
Submit input
Reset input

Button link

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

Colspan classes

colspan-1
colspan-1
colspan-2
colspan-4
colspan-3
colspan-1
colspan-full
colspan-5

colspan-1

Input A
Input B
Input C
Input D

colspan-2

Input A
Input B
Input C
Input D

colspan-3

Input A
Input B
Input C
Input D

colspan-full

Input A
Input B
Input C
Input D

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Semantic form tables

Table with `semanticForms` class

Table Title
Column 1	Column 2	Column 3
1		Link button 1
2		Link button 2
3		Link button 3

Table with a `form` in a cell

Table Title
Column 1	Column 2
Some text

Unstyled table

Table Title
Column 1	Column 2	Column 3
1	A	a
2	B	b
3	C	c

Low flow (JavaScript disabled) styling

Adding the lowFlow class to the form element removes all JS enhancements.

Name
Prefilled field
No placeholder
Password field: Password should be at least 8 characters long.
Don't show password field: Password should be at least 8 characters long.
Customize clear/show buttons: Password should be at least 8 characters long.
Input with button

Single form input

data-max-content text input
data-max-content select

Inputs

Email field
Telephone field
URL field
Search field
No float label
Number
Input with label help text: Some help text
Input with help icon
Required input with help icon
Invalid field
Valid field
Required field
Required field (no asterisk)
Required field (custom title)
Disabled input
Disabled input w/ value
Color field
Date field
Time field
Datetime-local field
Month field
Week field
File field
Input with button: Some help text that should span the entire width of the input/button combo.
Range field
Range value

Selects

Select box: Some help text regarding the select box
Required select box
Required select box (no asterisk)
Select with button
Multiple select

Other inputs

Textarea
Textarea (prefilled): Some prefilled content... Some help text regarding the textarea with some really long text that should overflow and wrap
Textarea: Row 1 Row 2 Row 3 Row 4 This textarea has the data-max-rows set to 3, so the textarea will not expand past 3 rows.
Disabled autosize textarea: Row 1 Row 2 Row 3 Row 4 Row 5 Row 6 This textarea element has the data-disable-autosize attribute applied, and has rows set to 5.
Auto-grow textarea: Start typing to see me grow
Auto-grow input

Alignment classes

align-start
align-center
align-end

align-start
align-center
align-end

Keyboard shortcuts

Default Input focus
Ctrl Input focus
Alt Input focus
Meta Input focus
Number focus
Textarea focus: Special character keyboard shortcuts also require Shift to be pressed.
Date focus: Hover over these inputs to see the keyboard shortcut
Color focus
Range focus
Select focus

Tables

Table with inputs and buttons

Table Title
Column 1	Column 2	Column 3
1		Link button 1
2		Link button 2
3		Link button 3

Table using `colgroups` to define column width

Table Title
Column 1	Column 2	Column 3
20%	50%	30%

Nested fieldsets

Fieldset 1

Input

Here is some subtext.

Input 2

Here's some small subtext.

Input 3

Here's some bold subtext.

Input 4

Here is some subtext.

Here is some more subtext.

Fieldset 2A

Input 1
Input 2
Select

Fieldset 3A

Input A
Input B
Input C
Input D

Fieldset 3

Input A
Input B
Input C
Input D

Fieldset 2B

Input 1
Input 2
Select

Detail elements

Detail element

Detail input
Detail input
Detail input
Detail input

Another detail element with a nested fieldset

Detail input

Nested fieldset

Nested fieldset input

Buttons

Standard button
Input button
Submit input
Reset input

Button link

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

Colspan classes

colspan-1
colspan-1
colspan-2
colspan-4
colspan-3
colspan-1
colspan-full
colspan-5

colspan-1

Input A
Input B
Input C
Input D

colspan-2

Input A
Input B
Input C
Input D

colspan-3

Input A
Input B
Input C
Input D

colspan-full

Input A
Input B
Input C
Input D

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Semantic Forms

High flow (JavaScript enabled) styling

Table with inputs and buttons

Table using colgroups to define column width

Semantic form tables

Table with semanticForms class

Table with a form in a cell

Unstyled table

Low flow (JavaScript disabled) styling

Table with inputs and buttons

Table using colgroups to define column width

Non-form related HTML elements

Table using `colgroups` to define column width

Table with `semanticForms` class

Table with a `form` in a cell

Table using `colgroups` to define column width