Forms

Full Form Example

Here's an example of the full form, showing all the elements in context. Details about specific elements is stated below.

Default Form

Default Form with Errors

Labels

Use the .form-label class to set the default styles on a label.

<form>
  <label class="form-label">Form Label</label>
  <label class="form-label">Required Form Label <span class="form-label-required">*</span></label>
</form>

Text Inputs

Use the .text-input class to apply the default styling for text inputs. Inputs should always be paired with a label to make them accessible. You can use placeholder text for additional context when necessary. NEVER use placeholder text in place of a label.

<form>
  <label for="form-text-input-1" class="form-label">Text Input Label</label>
  <input type="text" class="form-text-input" id="form-text-input-1" placeholder="this is placeholder text">
</form>

Helper Text

When necessary, you can place additional text below the input in a label with a .form-helper to add helper text.

<form>
  <label for="form-text-input-1" class="form-label">Text Input Label</label>
  <input type="text" class="form-text-input" id="form-text-input-1" placeholder="this is placeholder text">
  </form>
  <label class="form-helper">You don't need to include http://</label>
</form>

Textareas

Use the .form-textarea class to get the default styling. When setting a typesize and width, we recommend aiming for a measure of 52-78 characters.

<form>
  <label for="form-textarea-1" class="form-label">Textarea Label</label>
  <textarea name="form-textarea-1" id="form-textarea-1" class="form-textarea col-50-xs"></textarea>
</form>

Selects

Use the .form-select class to get the default styling.

<form>
  <label for="form-select-1" class="form-label">Select Label 1</label>
  <select id="form-select-1" class="form-select">
    <option value="">Item 1</option>
    <option value="">Item 2</option>
    <option value="">Item 3</option>
    <option value="">Item 4</option>
  </select>
</form>

Radios

Use .form-radio immediately following a label to get Leap's default radio button style.

<form>
  <input type="radio" id="form-radio-1" class="form-radio" name="radio" checked="checked">
  <label for="form-radio-1" class="form-label">A really long radio label that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on.</label>
  <input type="radio" id="form-radio-2" class="form-radio" name="radio">
  <label for="form-radio-2" class="form-label">A short radio label.</label>
</form>

Deprecated but Supported Before there was a inverted form theme, forms with white text on dark backgrounds needed a lighter hover state. To enable this, the .text-color-white class was used alongside .form-label. Going forward, don't use this method; instead, use the Inverse Form theme.

<form class="p-2-xs m-b-2-xs bg-gray-darker round">
  <input type="radio" id="form-radio-3" class="form-radio" name="radio" checked="checked">
  <label for="form-radio-3" class="form-label text-color-white">A radio label on a dark background.</label>
  <input type="radio" id="form-radio-4" class="form-radio" name="radio">
  <label for="form-radio-4" class="form-label text-color-white m-b-0-xs">Another radio label on a dark background.</label>
</form>

Checkboxes

Use .form-checkbox immediately following a label to get Leap's default checkbox style.

<form>
  <input type="checkbox" id="form-checkbox-1" class="form-checkbox">
  <label for="form-checkbox-1" class="form-label">A really long checkbox label that goes on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on and on.</label>
  <input type="checkbox" id="form-checkbox-2" class="form-checkbox">
  <label for="form-checkbox-2" class="form-label">A short checkbox label.</label>
</form>

Deprecated but Supported Before there was a inverted form theme, forms with white text on dark backgrounds needed a lighter hover state. To enable this, the .text-color-white class was used alongside .form-label. Going forward, don't use this method; instead, use the Inverse Form theme.

<form class="p-2-xs m-b-2-xs bg-gray-darker round">
  <input type="checkbox" id="form-checkbox-3" class="form-checkbox">
  <label for="form-checkbox-3" class="form-label text-color-white">A checkbox label on a dark background.</label>
  <input type="checkbox" id="form-checkbox-4" class="form-checkbox">
  <label for="form-checkbox-4" class="form-label text-color-white m-b-0-xs">Another checkbox label on a dark background.</label>
</form>

Uploads

Use .form-upload immediately following a label to get Leap's default file upload style.

<form>
  <input type="file" class="form-upload" id="form-upload-1">
  <label for="form-upload-1" class="form-label">Upload File...</label>
</form>

Form Success

Wrap each field in a fieldset and add the .fieldset and .form-feedback-success to apply Leap's default for feedback styling. Additionally, add a span with the class of form-feedback to inform the user what the feedback is.

<form>
  <fieldset class="form-feedback-success form-fieldset">
  <label for="" class="form-label">Input Label</label>
  <input type="text" class="form-text-input">
  <span class="form-feedback">Hasta La Vista, Baby!</span>
  </fieldset>
</form>

Form Warnings

Wrap each field in a fieldset and add the .fieldset and .form-feedback-warning to apply Leap's default for feedback styling. Additionally, add a span with the class of form-feedback to inform the user what the feedback is.

<form>
  <label class="form-label">Radio Label</label>
  <input type="radio" id="form-radio-5" class="form-radio" name="radio">
  <label for="form-radio-5" class="form-label">Radio Label 1</label>
  <input type="radio" id="form-radio-6" class="form-radio" name="radio">
  <label for="form-radio-6" class="form-label">Radio Label 2</label>
  <span class="form-feedback">It's not a tumor</span>
</form>

Form Error

Wrap each field in a fieldset and add the .fieldset and .form-feedback-error to apply Leap's default for feedback styling. Additionally, add a span with the class of form-feedback to inform the user what the feedback is.

<form>
  <fieldset class="form-feedback-error form-fieldset">
    <label class="form-label">Input Label</label>
    <select id="form-select-1" class="form-select">
      <option value="">Item 1</option>
      <option value="">Item 2</option>
      <option value="">Item 3</option>
      <option value="">Item 4</option>
    </select>
    <span class="form-feedback">Get to the chopper!</span>
  </fieldset>
</form>

Themes

The default theme is for forms that appear on a white background. To use a form on a dark background, add the .form-inverse class to the <form> element.

For any required text input, text area, or select inputs, add the .form-label-required-inset (in place of the usual .form-label-required) to the * span. This positions the required star on the input.

Inverse Form

Inverse Form with Feedback