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:

Inline forms only support single-line inputs.
Single inputs
Extra information or help text.
Use HTML5 url input to invoke native input behaviour.
  • 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 inputs
Multi checkbox
Multi radio
Note: if you set a radio button to both disabled AND checked, you create a horribly confusing situation. So don't do that.
Toggles are multi inputs as they are actually a two-state radio button set.
Mixed multi inputs
Mixed inline with button
Mixed inline with assistive label
Mixed inline with assistive label
Information about the input.
Mixed inline with selects
Prefixed URL
Error text explaining what to do

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.

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 forms are even more compact when combined with an inline multi group: