• Home /
• Plan /
• Birthdays

h1. Content Heading

WhereWhenHow ManyContactReviewConfirm

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

---

Forms Style Guide

The following are examples of different form styles and variations. Reuse the HTML markup and CSS classes for the form layout that you need.

By default, buttons in a green box with the btn class will be green. Add the btn-orange class to make them orange.

Basic form

Label name Example block-level help text here. Check me out Submit

---

Inline Form

Remember me Sign in

Horizontal form

Text input

Supporting help text. In addition to freeform text, any HTML5 text-based input appears like so.

Checkbox

Option one is this and that

Select list

something 2 3 4 5

Multicon-select

1 2 3 4 5

File input

Textarea

Submit Cancel

Form control states and validation

Focused input

Uneditable input

Some value here

Disabled input

Disabled checkbox

This is a disabled checkbox

Input with warning

Something may have gone wrong

Input with error

Please correct the error

Input with success

Woohoo!

Select with success

1 2 3 4 5 Woohoo!

Submit Cancel

Extending form controls

Form grid sizes

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

Use the same .span* classes from the grid system for input sizes.

Alternate sizes

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

Prepended text

@

Here's some help text

Appended text

.00

Here's more help text

Append and prepend

$.00

Append with button

Go!

Two-button append

SearchOptions

Inline checkboxes

1 2 3

Inline radio buttons

1 2 3

Checkboxes

Option one Option two Option three

Note: Labels surround all the options for much larger click areas and a more usable form.

Radio buttons

Option one is this and that Option two can be something else and selecting it will deselect option one

Submit Cancel