Skip to main content

Forms

Talk about fieldsets with and without legends, vis-à-vis screen readers. Thematically related, nested fieldsets supported but should be avoided if possible for easier accessibility.

Basic Label and Input Pairs

Apply the .form-basic class to a <form> tag to activate the custom styling seen below.

Text Fields and Sizes

By default, text fields (<input type="text">) will fill the width of their .input container (72% of form width). However, four size classes are also available to choose a size that best reflects the intended user input.

Special Text Fields and Icons

All special text field types can use the same four size classes as above. You can optionally include icons by placing a Font Awesome node (<span class="fa fa-search"></span>) immediately after the <input> tag and including the .icon class on the input.

Text Areas

Text Areas can also use the four size classes. However, the sizes affect height, not width.

Select Lists

Advanced Options

Nesting, Fancy Legends, label options, etc...

Label Alignment

Be careful with RWD! ...... Be careful when using forms in narrow containers......

Use the .label-align class to have label text align right, for closer proximity to their fields. They will still align left on smaller screen sizes, when inputs drop below their label.

Use the .label-right class to swap the left and right positions of label and input pairs. Note: This layout should only be used with smaller inputs, like those shown below. Labels will not align left on smaller screen sizes, nor will inputs drop below them. The left-right relationship is maintained at all sizes.

Fieldset Legends

It is said that the first Fieldsets roamed the Earth before written history, protecting early human civilization and bringing health and good fortune to all whom they encountered... perhaps this is why their <legend> tags persist to this day.

Basic Legend
Blue-Green Legend (.accent-blue-green.fill)
Blue Legend (.accent-blue.fill)
Purple Legend (.accent-purple.fill)
Gold Legend (.accent-gold.fill)
Green Legend (.accent-green.fill)
Red Legend (.accent-red.fill)

Fieldsets can be nested to create complex field groupings.

Nested Fieldset 1
Nested Fieldset 2

Fieldset Colors

Fieldsets can use the same .accent-* and .fill classes as legends and other containers (.panel, <section>, <aside>, etc...).

Blue-Green Legend (.accent-blue-green.fill)
Blue Legend (.accent-blue.fill)
Purple Legend (.accent-purple.fill)
Gold Legend (.accent-gold.fill)
Green Legend (.accent-green.fill)
Red Legend (.accent-red.fill)
Basic Legend

Colored fieldsets can be nested, but be mindful of color contrast. It is usually best to use a light touch. Consider base gray for the parent, and coloring only the border (no .fill class).

Nested Fieldset 1
Nested Fieldset 2

Buttons

Snazzy options and icons...