Select

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

Default

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>'s initial appearance and cannot modify the <option>s due to browser limitations.

Open this select menuOneTwoThree

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Advanced Select

WARNING

This feature is only available in AdminKit PRO. Learn more.

Choices.js is a vanilla, lightweight, configurable multiselect/listbox input plugin, fully compatible with Bootstrap 5. It allows searching for specific options.

ArizonaColoradoIdahoMontanaNebraskaNew MexicoNorth DakotaUtahWyoming

<select class="form-control choices-single">
  <option value="AZ">Arizona</option>
  <option value="CO">Colorado</option>
  <option value="ID">Idaho</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NM">New Mexico</option>
  <option value="ND">North Dakota</option>
  <option value="UT">Utah</option>
  <option value="WY">Wyoming</option>
</select>

new window.Choices(document.querySelector(".choices-single"));

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Open this select menuOneTwoThreeOpen this select menuOneTwoThree

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Disabled

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

Open this select menuOneTwoThree

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>