Forms

Goodkit supports all of Bootstrap's default form styling in addition to a handful of new input types and features.

Bootstrap Documentation

We'll never share your email with anyone else.

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

Readonly

Add the readonly boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Help text

Block-level help text in forms can be created using .form-text (previously known as .help-block in v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

@
@example.com

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.

Underline

Goodkit Exclusive

Removes background and all by bottom borders.

<div class="form-group">
  <input type="text" class="form-control form-control-underline" placeholder="Form control underline">
</div>