Semantic Forms

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

Table of Contents

Form styling
Semantic form tables
Sample forms
Non-form related HTML elements

Form styling

Every widget below is shown two ways: with the JavaScript enhancements applied, and with them switched off. Adding the lowFlow class to a form removes all JS enhancements, which is also what you get when JavaScript is unavailable.

Inputs

Basic inputs

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 buttons: Password should be at least 8 characters long.
Input with button

Single field form

Single form input

Content sized fields

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 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
Readonly field
Readonly textarea: This textarea is readonly

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

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Checkboxes, radios and switches

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:

Layout

Alignment classes

align-start
align-center
align-end

align-start
align-center
align-end

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

Col classes

col-3
col-1
col-2 colspan-2

Tabs

Account

Username
Email

Profile

Display name
Bio

Preferences

Newsletter
Theme

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 and details element

Detail input

Nested fieldset

Nested fieldset input

Some details

Nested detail input

Standalone details

Nested detail input 2

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

Inputs

Basic inputs

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 buttons: Password should be at least 8 characters long.
Input with button

Single field form

Single form input

Content sized fields

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 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
Readonly field
Readonly textarea: This textarea is readonly

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

P tag elements

Checkbox

Text input

Textarea

Some regular text with other elements inside of it

Checkboxes, radios and switches

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:

Layout

Alignment classes

align-start
align-center
align-end

align-start
align-center
align-end

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

Col classes

col-3
col-1
col-2 colspan-2

Tabs

Account

Username
Email

Profile

Display name
Bio

Preferences

Newsletter
Theme

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

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

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

Semantic Forms

Form styling

Inputs

Checkboxes, radios and switches

Buttons

Layout

Tabs

Table with inputs and buttons

Table using colgroups to define column width

Keyboard shortcuts

Inputs

Checkboxes, radios and switches

Buttons

Layout

Tabs

Table with inputs and buttons

Table using colgroups to define column width

Keyboard shortcuts

Semantic form tables

Table with semanticForms class

Table with a form in a cell

Unstyled table

Sample forms

Non-form related HTML elements

Table using `colgroups` to define column width

Table using `colgroups` to define column width

Table with `semanticForms` class

Table with a `form` in a cell