Forms

This page outlines commonly used components in our forms.

Basic Form Components

Commonly used form components.

Note

  • Always add a label and fieldset legend. If you need to hide it add .sr-only class.
  • For fancy select refer to selectize.js documentation
Legend

Form fields should always have fieldset and accompanying legend tags.

Use microcopy for very short help texts. Can have links

Prompts & Alerts

These provides visual feedback to the user for important events

Alert Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, et, quae repellat beatae ut inventore qui delectus sunt ullam rem illo nulla est rerum dicta reprehenderit veritatis ipsam quisquam itaque.

Alert Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, et, quae repellat beatae ut inventore qui delectus sunt ullam rem illo nulla est rerum dicta reprehenderit veritatis ipsam quisquam itaque.

Alert Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, et, quae repellat beatae ut inventore qui delectus sunt ullam rem illo nulla est rerum dicta reprehenderit veritatis ipsam quisquam itaque.

Alert Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, et, quae repellat beatae ut inventore qui delectus sunt ullam rem illo nulla est rerum dicta reprehenderit veritatis ipsam quisquam itaque.

Buttons

Our buttons use a visual hierarchiy. In order of importance: Special, Primary, Default, Danger, Button Links.

Standard Buttons

You can use anchors a and button tags for buttons.

Button Special Button Primary Button Default Button Danger Button Link



Outline Buttons

You can remove the solid fill by adding a .btn-outline class.

Button Special Button Primary Button Default Button Danger Button Link

Small Buttons

These buttons are commonoly used in tight spaces.

Button Special Button Primary Button Default Button Danger Button Link