Bootstrap 5 Select
Bootstrap 5 select examples for AdminKit: the styled native select with sizing and disabled states, and the advanced select in AdminKit PRO.
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.
<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
This feature is only available in AdminKit PRO. Learn more.
Choices.js is a lightweight, configurable multiselect/listbox input plugin in vanilla JavaScript that works with Bootstrap 5. It allows searching for specific options.
<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>
<script>
new Choices(document.querySelector(".choices-single"));
</script>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.
<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.
<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>Last updated on
Form control
Bootstrap 5 form control examples for AdminKit: text inputs and textareas with sizing, disabled, readonly, color input and datalist.
Multiselect
The multiselect component for Bootstrap 5 extends the native `<select>` element, featuring variations like dropdown, options, option groups, and more.