use-bootstrap-select Plugin Examples

Download This Plugin Back To CSSScript.Com

A JavaScript plugin that enhances standard select elements with customizable features using the native Bootstrap 5 dropdown component.

Features

  • Placeholder : Default text to display in the select element when no option is selected.
  • Tag-Like Appearance : Displays selected choices like tags in multiple mode.
  • Clearable : Enables users to easily remove selected options.
  • Searchable : Allows users to search and find options easily.
  • Creatable : Supports creating custom options.
  • Sizing : Adjustable sizing to match user preferences or layouts.
  • Validation : Reflects validation states visually to align with Bootstrap's form validation feedback.

Installation

Install from npm:

npm install use-bootstrap-select

After installation, you can import the library into your project as follows:

import 'use-bootstrap-select/dist/use-bootstrap-select.css'
import { UseBootstrapSelect } from 'use-bootstrap-select'

or, since it also comes with an IIFE bundle, you can insert it directly into your HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Use Bootstrap Select Demo</title>
    <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="node_modules/use-bootstrap-select/dist/use-bootstrap-select.min.css" rel="stylesheet">
  </head>
  <body>
    <select class="form-select" id="example">
      <option value="brave">Brave</option>
      <option value="chrome" selected>Chrome</option>
      <option value="edge">Edge</option>
      <option value="firefox">Firefox</option>
      <option value="opera">Opera</option>
      <option value="safari">Safari</option>
    </select>
    <script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="node_modules/use-bootstrap-select/dist/use-bootstrap-select.min.js"></script>
  </body>
</html>

Example

Basic
<select class="form-select" id="example-basic">
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-basic'))
</script>
Placeholder
<select class="form-select" id="example-placeholder">
  <option value="">Choose browser</option> <!-- use an option with an empty value as a placeholder -->
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-placeholder'))
</script>
Optgroup
<select class="form-select" id="example-optgroup">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-optgroup'))
</script>
Multiple
<select class="form-select" id="example-multiple" multiple>
  <option value="">Choose browser</option>
  <option value="chrome" selected>Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox" selected>Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-multiple'))
</script>
Clearable
<!-- Using data-ub-select-clear attribute: -->
<select class="form-select" id="example-clearable" data-ub-select-clear>
  <option value="">Choose browser</option>
  <option value="chrome" selected>Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-clearable'))
</script>
Search
<!-- Using data-ub-select-search attribute: -->
<select class="form-select" id="example-search" data-ub-select-search>
  <option value="">Choose browser</option>
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-search'))
</script>
Creatable
<!-- Using data-ub-select-create attribute: -->
<select class="form-select" id="example-creatable" data-ub-select-search data-ub-select-create>
  <option value="">Choose browser</option>
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-creatable'))
</script>
Disabled
<select class="form-select example-disabled" disabled>...</select>
<select class="form-select example-disabled" disabled multiple>...</select>

<script>
  for (const select of document.querySelectorAll('.example-disabled')) {
    new UseBootstrapSelect(select)
  }
</script>
Disabled options
<select class="form-select" id="example-disabled-option">
  <option value="">Choose browser</option>
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera" disabled>Opera</option>
  <option value="safari" disabled>Safari</option>
</select>

<script>
  new UseBootstrapSelect(document.getElementById('example-disabled-option'))
</script>
Sizing
<select class="form-select example-sizing form-select-sm">...</select>
<select class="form-select example-sizing">...</select>
<select class="form-select example-sizing form-select-lg">...</select>

<script>
  for (const select of document.querySelectorAll('.example-sizing')) {
    new UseBootstrapSelect(select)
  }
</script>
Validation
This field is required.
Good choice.
This field is required.
Good choice.
<form class="needs-validation" novalidate>
  <div>
    <select class="form-select" id="example-validation" data-ub-select-clear required>
      <option value="">Choose browser</option>
      <option value="chrome">Chrome</option>
      <option value="edge">Edge</option>
      <option value="firefox">Firefox</option>
      <option value="opera">Opera</option>
      <option value="safari">Safari</option>
    </select>
    <div class="invalid-feedback">This field is required.</div>
    <div class="valid-feedback">Good choice.</div>
  </div>
  <button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>

<script>
  new UseBootstrapSelect(document.getElementById('example-validation'))

  // Example starter JavaScript for disabling form submissions if there are invalid fields
  void (function () {
    document.querySelectorAll('.needs-validation').forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      })
    })
  })()
</script>
Methods
<select class="form-select" id="example1">
  <option value="">Choose browser</option>
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>
<button class="btn btn-sm btn-light" type="button" id="setValue1">setValue('firefox')</button>
<button class="btn btn-sm btn-light" type="button" id="getValue1">getValue()</button>

<script>
  const example1 = new UseBootstrapSelect(document.getElementById('example1'))
  document.getElementById('setValue1').addEventListener('click', () => {
    example1.setValue('firefox')
  })
  document.getElementById('getValue1').addEventListener('click', () => {
    alert(example1.getValue())
  })
</script>

<!-- ========================================================================================================== -->

<select class="form-select" id="example2" multiple>
  <option value="">Choose browser</option>
  <option selected value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option selected value="firefox">Firefox</option>
  <option value="opera">Opera</option>
  <option value="safari">Safari</option>
</select>
<button class="btn btn-sm btn-light" type="button" id="removeValue">removeValue('firefox')</button>
<button class="btn btn-sm btn-light" type="button" id="getValue2">getValue()</button>

<script>
  const example2 = new UseBootstrapSelect(document.getElementById('example2'))
  document.getElementById('removeValue').addEventListener('click', () => {
    example2.removeValue('firefox')
  })
  document.getElementById('getValue2').addEventListener('click', () => {
    alert(JSON.stringify(example2.getValue()))
  })
</script>

Methods

Name Params Returns Example
setValue string void 
example.setValue('chrome')
removeValue string void 
example.removeValue('chrome')
getValue null string | array 
example.getValue()