Form components

Text input

Default

Your name

Large

Your name

Email input with accessible help text

Email address We'll never share your email with anyone else.

Textarea

Your message

Select

Default: auto-width

Available options

Full-width

Available options

Shy style

Available options

Long options

Auto-width

Full-width

Checkboxes

Default: inline

Our terms Check this And check this also

Stacked

Our terms

Check this And check this also

Radios

Default: inline

You decide Either choose this Or choose that

Stacked

You decide

Either choose this Or choose that

Date input with datepicker

Date

Validation states

Text input

With success

Success! You've done it.

Example help text that remains unchanged.

With warning

Shucks, check the formatting of that and try again.

Example help text that remains unchanged.

With danger

Shit, that username's taken. Try another?

Example help text that remains unchanged.

Select

With success

Success! You've done it.

With warning

Shucks, check the formatting of that and try again.

With danger

Shit, that username's taken. Try another?

Checkbox

With success Check this

With warning Check this

With danger Check this

Input group

Generic

Icon button

Large

Stacked at small breakpoints with wrapper for help text

Example help text that remains unchanged.

Form columns

Your name

A quite long label text

Shucks, check the formatting of that and try again.

Example help text that remains unchanged.

Available options

Example help text that remains unchanged.