Semantic Forms

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

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.

Single form input

Fieldset legend

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
Range field
Range value

Selects

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

Checkboxes

Checkboxes

One
Two
Three

Required checkboxes

One
Two
Three

Checkboxes w/ help text

One
Two
Three

Checkboxes w/ additional text

One
Two
Three

This is some additional text.

Checkbox
Checkbox (required)
Checkbox w/ help text
Checkbox w/ additional text: This is some additional text.

Radios

Radios

One
Two
Three

Required radios

One
Two
Three

Radios w/ help text

One
Two
Three

Radios w/ additional text

One
Two
Three

This is some additional text.

Radio
Radio (required)
Radio w/ help text
Radio w/ additional text: This is some additional text.

Other

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.

Tables

Table with inputs and buttons

Table Title
Column 1	Column 2	Column 3
1
2
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 2

Input 1
Input 2
Select

Fieldset 3

Input A
Input B
Input C
Input D

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

Detail element

Detail input
Detail input
Detail input
Detail input

Another detail element with a nested fieldset

Detail input

Nested fieldset

Nested fieldset input

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Non-form related HTML elements

This is some regular HTML that should not be affected by any semantic forms styles

This is a div

This is a block quote

A link to the semantic forms repo

unordered list 1
unordered list 2
unordered list 3

ordered list 1
ordered list 2
ordered list 3

menu list 1

menu list 2

menu list 3

description list title: description list value

Details summary

Some detail text

Table with `semanticForms` class

Table Title
Column 1	Column 2	Column 3
1
2
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.

Single form input

Fieldset legend

Email field

Telephone field

URL field

Search field

Number

Input with label help text

Some help text

Invalid field

Valid field

Required field

Select box

Some help text regarding the select box

Checkboxes

One
Two
Three

Single checkbox

Radios

One
Two
Three

Color field

Date field

Time field

Datetime-local field

Month field

Week field

File field

Range field

Textarea

Textarea (prefilled)

Some help text regarding the textarea with some really long text that should overflow and wrap

Nested fieldset

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.

Another nested fieldset

Input
Input 2
Select

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

colspan-2

Input A
Input B
Input C

colspan-3

Input A
Input B
Input C
Input D

colspan-4

Input A
Input B
Input C
Input D
Input E

colspan-5

Input A
Input B
Input C
Input D
Input E
Input F

Details summary

Detail input
Detail input
Detail input
Detail input

Another details element

Detail input

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Flexbox button layout pattern with two submit buttons:

Flexbox button layout pattern with three submit buttons:

Non-form related HTML elements

This is some regular HTML that should not be affected by any semantic forms styles

This is a div

This is a block quote

A link to the semantic forms repo

unordered list 1
unordered list 2
unordered list 3

ordered list 1
ordered list 2
ordered list 3

menu list 1

menu list 2

menu list 3

description list title: description list value

Details summary

Some detail text

Semantic Forms

High flow (JavaScript enabled) styling

Inputs

Selects

Checkboxes

Radios

Other

Tables

Table with inputs and buttons

Table using colgroups to define column width

Nested fieldsets

Non-form related HTML elements

Table with semanticForms class

Table with a form in a cell

Unstyled table

Low flow (JavaScript disabled) styling

Non-form related HTML elements

Table using `colgroups` to define column width

Table with `semanticForms` class

Table with a `form` in a cell