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.
Input with button

Single form input

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

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
Input with button: Some help text that should span the entire width of the input/button combo.
Select with button
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.
Auto-grow textarea: Start typing to see me grow
Auto-grow input

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 2

Input 1
Input 2
Select

Fieldset 3

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

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

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

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.

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

Details summary

Detail input
Detail input
Detail input
Detail input

Another details element

Detail input

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

Button link

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

Semantic Forms

High flow (JavaScript enabled) styling

Inputs

Selects

Checkboxes

Radios

Other

Keyboard shortcuts

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