Author: | use-bootstrap |
---|---|
Views Total: | 200 views |
Official Page: | Go to website |
Last Update: | August 8, 2023 |
License: | MIT |
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