1. Components
2. Forms
3. Form Elements

Form Elements

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

---

Input Box

A basic form control with disabled and readonly mode.

<input type="text" class="form-control" placeholder="Input box">
<input type="text" class="form-control" placeholder="Input box (disabled)" disabled>
<textarea class="form-control" rows="2" placeholder="Textarea"></textarea>
<textarea class="form-control" rows="2" placeholder="Textarea (disabled)" disabled></textarea>

---

Validation State

A form control with success, warning and error state.

<form id="form1" class="needs-validation was-validated" novalidate>
  <div class="row row-sm mg-b-10">
    <div class="col-sm-6">
      <input type="text" class="form-control" placeholder="Valid state">
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
      <input type="text" class="form-control" placeholder="Invalid state" required>
      <div class="invalid-feedback">This is required</div>
    </div>
    <div class="col-sm-6 mg-t-10">
      <textarea class="form-control" rows="2" placeholder="Valid state"></textarea>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-sm-6 mg-t-10">
      <textarea class="form-control" rows="2" placeholder="Invalid state" required></textarea>
      <div class="invalid-feedback">This is required</div>
    </div>
  </div>
</form>

---

Checkboxes

For even more customization and cross browser consistency, use our completely custom checkbox element to replace the browser defaults.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck2" disabled>
  <label class="custom-control-label" for="customCheck2">Custom checkbox (disabled)</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck3" checked>
  <label class="custom-control-label" for="customCheck3">Custom checkbox (checked)</label>
</div>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck4" checked disabled>
  <label class="custom-control-label" for="customCheck4">Custom checkbox (checked disabled)</label>
</div>

---

Radios

For even more customization and cross browser consistency, use our completely custom radio element to replace the browser defaults.

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked>
  <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio3" name="customRadio2" class="custom-control-input" checked disabled>
  <label class="custom-control-label" for="customRadio3">Custom radio</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio4" name="customRadio2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadio4">Custom radio</label>
</div>

---

Switches

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch. Switches also support the disabled attribute.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch3" checked>
  <label class="custom-control-label" for="customSwitch3">Toggle this switch element</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch4" checked disabled>
  <label class="custom-control-label" for="customSwitch4">Disabled switch element</label>
</div>

---

Select Menu

Custom select menus need only a custom class, .custom-select to trigger the custom styles.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

---

Range

Create custom range controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

---

File Browser

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

---

Colorpicker

A simple component to select color in the same way you select color in Adobe Photoshop.

<p class="mg-b-10">Basic Functionality</p>
<input type="text" id="colorpicker">

<p class="mg-t-30 mg-b-10">You can allow alpha transparency selection. Check out these example.</p>
<input type="text" id="showAlpha">

<p class="mg-t-30 mg-b-10">Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.</p>
<input type="text" id="showPaletteOnly">