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

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

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