Tabler

Source code Sponsor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Form selectboxes

Add selectboxes to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectboxes with a label, use icons only or icons with labels. Alternatively, you can use pill selectboxes if they go well with your design.

<div class="mb-3">
  <label class="form-label">Simple selectgroup</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/sun -->
        <!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/moon -->
        <!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/cloud-rain -->
        <!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/cloud -->
        <!-- SVG icon code -->
      </span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
      <span class="form-selectgroup-label">Other</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Selectgroup with icons and text</label>
  <div class="form-selectgroup">
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
        <!-- SVG icon code with class="me-1" -->
        Home</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="user" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/user -->
        <!-- SVG icon code with class="me-1" -->
        User</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="circle" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/circle -->
        <!-- SVG icon code with class="me-1" -->
        Circle</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="radio" name="icons" value="square" class="form-selectgroup-input">
      <span class="form-selectgroup-label"><!-- Download SVG icon from http://tabler-icons.io/i/square -->
        <!-- SVG icon code with class="me-1" -->
        Square</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Different style</label>
  <div class="form-selectgroup form-selectgroup-pills">
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
      <span class="form-selectgroup-label">HTML</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
      <span class="form-selectgroup-label">CSS</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
      <span class="form-selectgroup-label">PHP</span>
    </label>
    <label class="form-selectgroup-item">
      <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
      <span class="form-selectgroup-label">JavaScript</span>
    </label>
  </div>
</div>

Advanced selectboxes

Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons, if you want users to select only one option or with checkboxes, if they are allowed to choose multiple options.

<div class="mb-3">
  <label class="form-label">Payment method</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-visa payment-xs me-2"></span>
          ending in <strong>7998</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-mastercard payment-xs me-2"></span>
          ending in <strong>2807</strong>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div>
          <span class="payment payment-provider-paypal payment-xs me-2"></span>
        </div>
      </div>
    </label>
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Project Manager</label>
  <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar me-3" style="background-image: url(...)"></span>
          <div>
            <div class="font-weight-medium">Paweł Kuna</div>
            <div class="text-muted">UI Designer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input"  checked>
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar me-3">JL</span>
          <div>
            <div class="font-weight-medium">Jeffie Lewzey</div>
            <div class="text-muted">Chemical Engineer</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar me-3" style="background-image: url(...)"></span>
          <div>
            <div class="font-weight-medium">Mallory Hulme</div>
            <div class="text-muted">Geologist IV</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar me-3" style="background-image: url(...)"></span>
          <div>
            <div class="font-weight-medium">Dunn Slane</div>
            <div class="text-muted">Research Nurse</div>
          </div>
        </div>
      </div>
    </label>
    <label class="form-selectgroup-item flex-fill">
      <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
      <div class="form-selectgroup-label d-flex align-items-center p-3">
        <div class="me-3">
          <span class="form-selectgroup-check"></span>
        </div>
        <div class="form-selectgroup-label-content d-flex align-items-center">
          <span class="avatar me-3" style="background-image: url(...)"></span>
          <div>
            <div class="font-weight-medium">Emmy Levet</div>
            <div class="text-muted">VP Product Management</div>
          </div>
        </div>
      </div>
    </label>
  </div>
</div>