Advanced Select Boxes For Bootstrap 5 With use-bootstrap-select

Preview:

Description:

use-bootstrap-select is a JavaScript plugin that enhances standard select elements with customizable features using the native Bootstrap 5 dropdown component.

Features:

• Display selections as tag-style pills.
• Searchable, filterable, and clearable options.
• Add new options to the regular select box.
• Customize sizing and proportions.
• Validate forms and reflect states.
• Work with single or multi-selects.

How to use it:

1. Download and load the use-bootstrap-select’s files into your Bootstrap 5 project.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- use-bootstrap-select -->
<link rel="stylesheet" href="use-bootstrap-select.min.css" />
<script src="use-bootstrap-select.min.js"></script>

2. Initialize the plugin on your select element.

<select class="form-select" id="example">
  ... options here
</select>

const example = UseBootstrapSelect(document.getElementById('example'))

3. Config the plugin with the following data attributes:

• data-ub-select-clear: Display a close icon to clear selections
• data-ub-select-search: Enable a search field to filter through options
• data-ub-select-create: Allows users to add more options to the select
• data-ub-select-max-height: Specify the max height of the dropdown

<select 
  class="form-select" 
  id="example"
  data-ub-select-clear="true" 
  data-ub-select-search="true"
  data-ub-select-create="true"
  data-ub-select-max-height="15rem">
  ... options here
</select>

4. API methods.

// set option
example.setValue('chrome')
// remove option
example.removeValue('chrome')
// get selections
example.getValue()

Changelog:

v1.0.0 (08/08/2023)

• Refactor project to use function-based implementation UseBootstrapSelect() instead of class-based instantiation new UseBootstrapSelect()
• Reduced file size