Atomics ~ Forms
image
Submit in style

Build consistent and good looking forms with form layout helpers and standardized input controls.

navigation
forms
buttons
images
icons
tables
labels
progress bars
media object
cards
counters
Form rows

The form-row utility class groups related elements on a single line.

Legend
Input helper text
Input helper text
Input helper text
Input

Default:

With placeholder:

Read-only:

With help text:

Input helper text

Invalid state:

You moron

Valid state:

You rock

Prepend:

@

Append:

@

Prepend and append:

@@

Prepend, invalid, with placeholder:

@ You moron

Append, valid, with placeholder:

@ You rock

Append, larger:

@

Append, inline:

@

Append, inline, icon:

Textarea

Default:

With placeholder:

Read-only:

With help text:

Textarea helper text

Invalid state:

You moron

Valid state:

You rock

Select

Default:

Read-only:

With help text:

Select helper text

Invalid state:

You moron

Valid state:

You rock