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

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

Sizing

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

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

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.

Select

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Checks and radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

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
https://example.com/users/
$ .00
@
With textarea

Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

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>

Timeline radio

Goodkit Exclusive

The timeline radio component that combines the custom radios and the countUp plugin. The color of the timeline radio component can be controlled with the .timeline-radio-{color} utility classes.

$ 499 /mo
<form>
  <div class="form-group timeline-radio timeline-radio-warning">

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioOne" data-toggle="price" data-target="#price" data-value="199" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioOne">
      <small class="text-muted">1-5</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioTwo" data-toggle="price" data-target="#price" data-value="299" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioTwo">
      <small class="text-muted">6-15</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioThree" data-toggle="price" data-target="#price" data-value="399" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioThree">
      <small class="text-muted">16-40</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioFour" data-toggle="price" data-target="#price" data-value="499" name="timelineRadio" type="radio" checked>
    <label class="timeline-radio-label" for="timelineRadioFour">
      <small class="text-muted">41-100</small>
    </label>

    <!-- Timeline radio -->
    <input class="timeline-radio-input" id="timelineRadioFive" data-toggle="price" data-target="#price" data-value="599" name="timelineRadio" type="radio">
    <label class="timeline-radio-label" for="timelineRadioFive">
      <small class="text-muted">100+</small>
    </label>

  </div>
  <div class="row align-items-center">
    <div class="col-md text-center text-md-start">

      <!-- Price -->
      <div class="display-4 fw-bolder mb-4 mb-md-0">
        <span class="fs-3 align-middle">$</span>
        <span class="mx-n2" id="price">499</span>
        <span class="fs-2 align-middle">/mo </span>
      </div>

    </div>
    <div class="col-md-auto">

      <!-- Button -->
      <button class="btn w-100 btn-primary-dark lift">
        Start Hiring
      </button>

    </div>
  </div>
</form>