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

Category: Form , Javascript | August 8, 2023
Author:use-bootstrap
Views Total:200 views
Official Page:Go to website
Last Update:August 8, 2023
License:MIT

Preview:

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

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

You Might Be Interested In:


Leave a Reply