Forms

Usage

• Caution when using <button> inside of <form> elements with AJAX without type="button" as this will trigger the default form submission action
• Radio and checkbox inputs should be inside their <label> to ensure proper styling

Accessibility

• Every input should have a label with the for attribute pointing to the id of the input, therefor id should always be unique
• If having a label doesn't make sense, using the aria-label attribute on the input is a good alternative

Inputs

Selects

Checkboxes

Radios

Layout

Vertical layout is preferred and should be the standard, however there are times when horizontal may make more sense.

Validation

Use the error-message class to display the error under the input. There is also a has-error class that can be applied to the form-group to highlight the input.

Addons

Addons provides a way to add text or an icon to either side of the input field. In these examples, input-group-addon, input-group-btn, input-group-inner-addon classes are used to apply styles.

Input Group Buttons

Wrap a <button> in input-group-btn to attach an action to either side of an input. Bordered button styles (btn-secondary, btn-link) align flush with the input border, while filled buttons (btn-primary, btn-success) sit edge to edge.