uc-select-box
v1.0.5
Published
A modern, highly accessible, and playful custom select box component built for Bootstrap 5 and jQuery.
Downloads
825
Readme
UC Select Box
A modern, highly accessible, and playful custom select box component built for Bootstrap 5 and jQuery.
It seamlessly converts standard HTML <select> elements into beautiful dropdowns with full support for searchable options, custom clear buttons, keyboard navigation, and automatic Light/Dark mode theming using native Bootstrap variables.
Features
- ✨ Playful & Minimal UI: Features smooth entrance animations, rounded borders, and floating pill-style list items.
- 🔍 Searchable Options: Easily add a search bar inside the dropdown to filter long lists of options.
- 🌓 Automatic Theming: Fully integrates with Bootstrap 5 CSS variables (
data-bs-theme). It adapts to light and dark modes automatically without hardcoded colors. - ♿ ADA / WCAG Compliant: Built with accessibility in mind. Implements the correct
role="listbox",role="combobox",role="option", andaria-selectedattributes so screen readers can interpret it flawlessly. - ⌨️ Keyboard Navigation: Fully focusable and responsive to keyboard interactions.
- ❌ Clear Selection: Includes a built-in clear button to quickly reset the input.
Dependencies
Before using this library, ensure you have included the following dependencies in your project:
- Bootstrap 5 (CSS & JS)
- jQuery (v3.6.0+)
Installation (CDN)
Because this package is published on NPM, you can easily include it in your project via jsDelivr.
Add the following tags to the <head> of your HTML document (after Bootstrap and jQuery):
<!-- Load UC Select CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/uc-select.css"
/>
<!-- Load UC Select JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/uc-select.js"></script>Usage
Simply apply one of the two trigger classes to any standard HTML <select> element. The library automatically intercepts them on page load and replaces them with the custom dropdown.
1. Standard Custom Select
To create a modern select box without a search bar, add the form-select class:
<label for="regularSelect" class="form-label">Favorite Fruit</label>
<select class="form-select" id="regularSelect" name="fruit">
<option value="">Select a Fruit...</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>2. Searchable Custom Select
To create a select box with a built-in search bar, add the form-select-search class:
<label for="searchableSelect" class="form-label">Searchable Fruit</label>
<select class="form-select-search" id="searchableSelect" name="search_fruit">
<option value="">Search a Fruit...</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
<option value="date">Date</option>
<option value="elderberry">Elderberry</option>
</select>Dynamic Initialization
If you add new <select> elements to the DOM asynchronously (e.g., via AJAX), you can re-initialize the library by calling:
window.initUcCustomSelects();License
MIT