Forms

Design

Forms are used to capture information and configure settings. There are many different control types and each control can be displayed in different states.

Demonstration form

Several layouts are supported:

Top Labels Side Labels Filter forms Inline form

Single inputs

Simple text input

Extra information or help text.

Textarea

Single checkbox

Select

Foo Bar (selected) Sin Qua

Email

Use HTML5 email input to invoke native input behaviour.

URL input

Use HTML5 url input to invoke native input behaviour.

Number input

Date picker input

File input

• 01.01 Q1report.pdf1.87 mb
• 01.02 Q2report.pdf1.01 mb
• 01.03 Q3report.pdf2.11 mb
• 01.04 Q4report.pdf1.99 mb

Multi file input

Generic Button Submit

Multi inputs

Multi checkbox

Check 1

Check 2 (checked)

Check 3 (disabled, unchecked)

Check 4 (disabled, checked)

Multi radio

Radio 1

Radio 2

Radio 3 (disabled in off state)

Note: if you set a radio button to both disabled AND checked, you create a horribly confusing situation. So don't do that.

Toggle

Off On

Toggles are multi inputs as they are actually a two-state radio button set.

Mixed multi inputs

Mixed inline with button

Foo Inline action

Mixed inline with assistive label

Assistive label should not be visible Inline action

Mixed inline with assistive label

Assistive label should not be visible Inline action

Information about the input.

Importance

Low

Medium

High

cImportance

Low

Medium

High

Mixed inline with selects

Day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Month Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Prefixed URL

http://example.com/

States

Error state

Error text explaining what to do

Required text input*

Read-only text input

Disabled text input

Filter form

Filter Forms have a different visual treatment including a compact, horizontal design. Note that multi-line inputs such as textareas should not be used.

Date picker input

Text filter

Select

Foo Bar Sin Qua

Submit

Filter Forms can be used with two sections to divide up a larger form (use the ace-assistive class to hide the legends if required). Two Filter Forms can be used one after the other to produce the same effect. Use sections when the two visually-distinct areas relate to one overall interaction; use multiple forms when each visually-distinct area is a self-contained interaction.

Filter

Text filter

Select

Foo Bar (selected)

Filter

Text filter

Select

Foo Bar (selected) Sin Qua

Submit

Filter forms are even more compact when combined with an inline multi group:

Fluffy Rabbits Meerkats Quokkas Feathered Falcon Eagle Kestrel Submit