Elements

Inputs, selects, textareas, checkboxes, radios and switches, with their sizes, states and the input group add-ons.

Classic inputs

Add the form-control class to a text input to style it. Give every input a label, and use the placeholder for an example value rather than as the label.

<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />

All variants of the input control are available in the examples below:

<div class="mb-3">
  <label class="form-label">Text</label>
  <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
</div>
<div class="mb-3">
  <label class="form-label">Password</label>
  <input type="password" class="form-control" name="example-password-input" placeholder="Input placeholder" />
</div>
<div class="mb-3">
  <label class="form-label">Disabled</label>
  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" disabled />
</div>
<div class="mb-3">
  <label class="form-label">Readonly</label>
  <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly />
</div>

Form control rounded

Use the form-control-rounded class if you prefer form controls with rounded corners.

<div class="mb-3">
  <label class="form-label">Form control rounded</label>
  <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text.." />
  <div class="input-icon">
    <input type="text" value class="form-control form-control-rounded" placeholder="Search…" />
    <span class="input-icon-addon">
      <!-- Download SVG icon from http://tabler.io/icons/icon/search -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
        <path d="M21 21l-6 -6" />
      </svg>
    </span>
  </div>
</div>

Form control flush

You can remove borders from your form control by adding the form-control-flush class.

<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text.." />

Input with icon

Put an icon inside an input to hint at what goes in it, or a spinner to show that the field is busy.

<div class="mb-3">
  <label class="form-label">Icon input</label>
  <div class="input-icon mb-3">
    <input type="text" value class="form-control" placeholder="Search…" />
    <span class="input-icon-addon">
      <!-- Download SVG icon from http://tabler.io/icons/icon/search -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
        <path d="M21 21l-6 -6" />
      </svg>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <!-- Download SVG icon from http://tabler.io/icons/icon/user -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
        <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
      </svg>
    </span>
    <input type="text" value class="form-control" placeholder="Username" />
  </div>
</div>
<div class="mb-3">
  <label class="form-label">Loader input</label>
  <div class="input-icon mb-3">
    <input type="text" value class="form-control" placeholder="Loading…" />
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
    </span>
  </div>
  <div class="input-icon mb-3">
    <span class="input-icon-addon">
      <div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
    </span>
    <input type="text" value class="form-control" placeholder="Loading…" />
  </div>
</div>

Separated inputs

Include an additional element in your input section, such as a button which can be used to submit the information entered in the input control.

<div class="mb-3">
  <label class="form-label">Separated inputs</label>
  <div class="row g-2">
    <div class="col">
      <input type="text" class="form-control" placeholder="Search for…" />
    </div>
    <div class="col-auto">
      <a href="#" class="btn btn-icon" aria-label="Button">
        <!-- Download SVG icon from http://tabler.io/icons/icon/search -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
          <path d="M21 21l-6 -6" />
        </svg>
      </a>
    </div>
  </div>
</div>

Textarea and select

Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.

Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.

Select
Select multiple
<div class="mb-3">
  <label class="form-label">Textarea</label>
  <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder"></textarea>
</div>
<div class="mb-3">
  <div class="form-label">Select</div>
  <select class="form-select">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
<div class="mb-3">
  <div class="form-label">Select multiple</div>
  <select class="form-select" multiple="true">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Input size

Inputs come in three sizes: small, default and large.

<div class="mb-3">
  <label class="form-label">Input sizing</label>
  <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" />
  <input class="form-control mb-2" type="text" placeholder="Default input" />
  <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
</div>

Datalists

Use the datalist element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.

<div class="mb-3">
  <label class="form-label">Datalist example</label>
  <input class="form-control" list="datalistOptions" placeholder="Type to search..." />
  <datalist id="datalistOptions">
    <option value="Aruba"></option>
    <option value="Afghanistan"></option>
    <option value="Angola"></option>
    <option value="Anguilla"></option>
    <option value="Albania"></option>
    <option value="Andorra"></option>
    <option value="United Arab Emirates"></option>
    <option value="Argentina"></option>
    <option value="Armenia"></option>
    <option value="American Samoa"></option>
  </datalist>
</div>

Toggle switches

Use toggle switches for the elements of your form which require choosing between two opposing states.

Toggle switches
Single switch
<div class="mb-3">
  <div class="form-label">Toggle switches</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" checked />
    <span class="form-check-label">Option 1</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" />
    <span class="form-check-label">Option 2</span>
  </label>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" />
    <span class="form-check-label">Option 3</span>
  </label>
</div>
<div class="mb-3">
  <div class="form-label">Single switch</div>
  <label class="form-check form-switch">
    <input class="form-check-input" type="checkbox" />
    <span class="form-check-label">I agree with terms and conditions</span>
  </label>
</div>

Radios

Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.

Radios
<div class="mb-3">
  <div class="form-label">Radios</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="radio" name="radios" checked />
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" name="radios" />
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" disabled />
      <span class="form-check-label">Option 3</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="radio" checked disabled />
      <span class="form-check-label">Option 4</span>
    </label>
  </div>
</div>
Inline Radios
<div class="mb-3">
  <div class="form-label">Inline Radios</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="radios-inline" checked />
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="radios-inline" />
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="radios-inline" disabled />
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Checkboxes

Use checkboxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.

Checkboxes
Inline Checkboxes
<div class="mb-3">
  <div class="form-label">Checkboxes</div>
  <div>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" />
      <span class="form-check-label">Checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" disabled />
      <span class="form-check-label">Disabled checkbox input</span>
    </label>
    <label class="form-check">
      <input class="form-check-input" type="checkbox" checked />
      <span class="form-check-label">Checked checkbox input</span>
    </label>
  </div>
</div>
<div class="mb-3">
  <div class="form-label">Inline Checkboxes</div>
  <div>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" />
      <span class="form-check-label">Option 1</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" disabled />
      <span class="form-check-label">Option 2</span>
    </label>
    <label class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" checked />
      <span class="form-check-label">Option 3</span>
    </label>
  </div>
</div>

Range input

Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.

<div class="mb-3">
  <label class="form-label">Range input</label>
  <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" />
  <div class="form-range mb-2 text-green" id="range-color"></div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    window.noUiSlider && noUiSlider.create(document.getElementById("range-color"), {
      start: 40,
      connect: [true, false],
      step: 10,
      range: {
        min: 0,
        max: 100,
      },
    });
  });
</script>

Input group

Create a group of input controls and place add-ons on either side of an input.

@
.tabler.io
https://.tabler.io
<div class="mb-3">
  <label class="form-label">Input group</label>
  <div class="input-group mb-2">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="username" autocomplete="off" />
  </div>
  <div class="input-group mb-2">
    <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>
  <div class="input-group">
    <span class="input-group-text">https://</span>
    <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>
</div>

Input with checkboxes or radios

Add checkboxes or radio buttons on either side of your input control.

<div class="mb-3">
  <label class="form-label">Input with checkbox or radios</label>
  <div class="input-group mb-2">
    <span class="input-group-text">
      <input class="form-check-input m-0" type="checkbox" checked />
    </span>
    <input type="text" class="form-control" autocomplete="off" />
  </div>
  <div class="input-group">
    <input type="text" class="form-control" autocomplete="off" />
    <span class="input-group-text">
      <input class="form-check-input m-0" type="radio" checked />
    </span>
  </div>
</div>

Input with prepended or appended text

Add text to your input control, either before or after the text which is to be entered by a user.

https://tabler.io/users/
.tabler.io
<div class="mb-3">
  <label class="form-label">Input with prepended text</label>
  <div class="input-group input-group-flat mb-2">
    <span class="input-group-text">
      <a href="https://tabler.io/users/">https://tabler.io/users/</a>
    </span>
    <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off" />
  </div>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off" />
    <span class="input-group-text">.tabler.io</span>
  </div>
</div>

Include a link in your input control to add a clickable element within the control.

Show password
<div class="mb-3">
  <label class="form-label">Input with appended link</label>
  <div class="input-group input-group-flat">
    <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
    <span class="input-group-text">
      <a href="#" class="input-group-link">Show password</a>
    </span>
  </div>
</div>

Input with appended kbd

Include a <kbd> in your input control to add a shortcut hint to the control.

ctrl + K
<div class="mb-3">
  <label class="form-label">Input with appended kbd</label>
  <div class="input-group input-group-flat">
    <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
    <span class="input-group-text">
      <kbd>ctrl + K</kbd>
    </span>
  </div>
</div>

Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.

<div class="mb-3">
  <label class="form-label">Input with appended icon links</label>
  <div class="input-group input-group-flat">
    <input type="text" class="form-control" autocomplete="off" />
    <span class="input-group-text">
      <a href="#" class="link-secondary" title="Clear search" data-bs-toggle="tooltip">
        <!-- Download SVG icon from http://tabler.io/icons/icon/x -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M18 6l-12 12" />
          <path d="M6 6l12 12" />
        </svg>
      </a>
      <a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip">
        <!-- Download SVG icon from http://tabler.io/icons/icon/adjustments -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
          <path d="M6 4v4" />
          <path d="M6 12v8" />
          <path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
          <path d="M12 4v10" />
          <path d="M12 18v2" />
          <path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
          <path d="M18 4v1" />
          <path d="M18 9v11" />
        </svg>
      </a>
      <a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip">
        <!-- Download SVG icon from http://tabler.io/icons/icon/bell -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
          <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
          <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
        </svg>
      </a>
    </span>
  </div>
</div>

Horizontal form

Put the label and the field in one row to place them side by side. The label takes col-form-label instead of form-label, which keeps it aligned with the field rather than sitting above it.

Add required to the label to append a red asterisk.

<div class="mb-3 row">
  <label class="col-3 col-form-label required" for="form-horizontal-email">Email address</label>
  <div class="col">
    <input type="email" id="form-horizontal-email" class="form-control" placeholder="[email protected]" />
  </div>
</div>
<div class="mb-3 row">
  <label class="col-3 col-form-label" for="form-horizontal-company">Company</label>
  <div class="col">
    <input type="text" id="form-horizontal-company" class="form-control" placeholder="Optional" />
  </div>
</div>

Wrap the buttons that close a form in form-footer. It only adds the top margin that separates them from the last field, so the spacing is the same in every form.

<div class="mb-3">
  <label class="form-label" for="form-footer-name">Name</label>
  <input type="text" id="form-footer-name" class="form-control" />
</div>
<div class="form-footer">
  <button type="submit" class="btn btn-primary w-100">Create account</button>
</div>

Accessibility

  • Every field needs a label with a for that matches the field id. A placeholder is not a label - it disappears as soon as the user types.
  • When the design has no room for a visible label, keep the label and hide it with visually-hidden rather than dropping it.
  • Tie help text and errors to the field with aria-describedby, so they are read together with it. See form helpers and validation states.
  • Mark a required field with the required attribute, not only with an asterisk in the label.
  • Group related checkboxes or radios in a fieldset with a legend. The legend is the only thing that names the group. See fieldsets.
  • Keep input types honest - email, tel, url and number change the on-screen keyboard on phones and let the browser validate for you.
  • Do not disable a field to make it read-only. disabled removes it from the tab order and from the submitted data; readonly keeps both.

SCSS variables

Use these SCSS variables to customize form controls. The default values are:

$input-bg: var(--bg-forms);
$input-disabled-color: null;
$input-disabled-bg: var(--bg-forms-disabled);
$input-disabled-border-color: null;

$input-height: null;
$input-height-sm: null;
$input-height-lg: null;
$input-border-radius: var(--border-radius);
$input-border-radius-sm: var(--border-radius-sm);
$input-border-radius-lg: var(--border-radius-lg);
$input-padding-y: $input-btn-padding-y;
$input-padding-x: $input-btn-padding-x;
$input-font-family: $input-btn-font-family;
$input-font-size: $input-btn-font-size;
$input-font-weight: $font-weight-base;
$input-color: var(--body-color);
$input-box-shadow: var(--shadow-input);

$input-plaintext-color: var(--body-color);

$input-focus-bg: $input-bg;
$input-focus-border-color: tint-color($component-active-bg, 50%);
$input-focus-color: var(--body-color);
$input-focus-width: $input-btn-focus-width;
$input-focus-box-shadow: $input-btn-focus-box-shadow;
$input-transition:
  border-color 0.15s ease-in-out,
  box-shadow 0.15s ease-in-out;

$input-border-width: $input-btn-border-width;
$input-line-height: $input-btn-line-height;
$input-line-height-lg: $input-btn-line-height-lg;
$input-line-height-sm: $input-btn-line-height-sm;
$input-height-border: calc(#{$input-border-width} * 2);

$input-padding-y-sm: $input-btn-padding-y-sm;
$input-padding-x-sm: $input-btn-padding-x-sm;
$input-font-size-sm: $input-btn-font-size-sm;

$input-padding-y-lg: $input-btn-padding-y-lg;
$input-padding-x-lg: $input-btn-padding-x-lg;
$input-font-size-lg: $input-btn-font-size-lg;

$input-height-inner: add($input-line-height, calc($input-padding-y * 2));
$input-height-inner-half: add($input-line-height, $input-padding-y);
$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5));

$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false));
$input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false));
$input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false));
Validation

Show valid and invalid states on form fields with feedback messages, so users know exactly what to correct before submitting.

Helpers

Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors.

Fieldset

Group related form fields with a styled fieldset to make long forms better organized and easier to understand.

Date picker

Let users pick a date from a calendar with the Litepicker plugin, as a plain input, an icon input, or an inline calendar.

Advanced select

Build searchable single and multi-value selects with the Tom Select plugin, including optgroups, validation states, and rich options with avatars or flags.

On this page

130 sleek illustrations for your startup's visual identity.