Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Selects

Customize the native selects with custom CSS that changes the element’s initial appearance. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Basic Example

Custom styles are limited to the select’s initial appearance and cannot modify the options 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>



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>






Select 2

A jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results. Read the Official Select2 Documentation for a full list of instructions and other options.



Basic Usage

By default it supports all options and operations that are available in a standard select box, but with added flexibility.

<select class="form-select select2">
  <option label="Choose one"></option>
  <option value="Firefox">Firefox</option>
  <option value="Chrome">Chrome</option>
  <option value="Safari">Safari</option>
  <option value="Opera">Opera</option>
  <option value="Internet Explorer">Internet Explorer</option>
</select>
$('.select2').select2({
  placeholder: 'Choose one',
  minimumResultsForSearch: Infinity
});



With Search

Select2 by default does have a search box displayed but most of the time this template uses select2 without a search.




Disabled

Select2 will respond to the disabled attribute on select elements. You can also initialize Select2 with disabled: true to get the same effect.




Multiple Box

Select2 also supports multi-value select boxes. The select below is declared with the multiple attribute.

<select id="select2D" class="form-select" multiple>
  <option value="Firefox">Firefox</option>
  <option value="Chrome" selected>Chrome</option>
  <option value="Safari">Safari</option>
  <option value="Opera" selected>Opera</option>
  <option value="Internet Explorer">Internet Explorer</option>
</select>



Clearable

When set to true, causes a clear button close icon to appear on the select box when a value is selected. Clicking the clear button will clear the selected value, effectively resetting the select box back to its placeholder value.

$('#select2E').select2({
  placeholder: 'Choose one',
  allowClear: true,
  minimumResultsForSearch: Infinity
});



Limit Selection

Select2 multi-value select boxes can set restrictions regarding the maximum number of options that can be selected. 

$('#select2F').select2({
  placeholder: 'Choose one or two',
  maximumSelectionLength: 2,
  minimumResultsForSearch: Infinity
});



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels