+The main examples now live directly on this docs page so they inherit the docs theme, including light and dark mode. The standalone HTML files are still kept under `docs/static/examples/` for quick smoke-testing outside Docusaurus.
## Standard select boxes
Make this:
+ html={String.raw`
+
Native select:
-
+
+
-
Become this:
+
+
Enhanced with bootstrap-select:
- `}
+
+
`}
/>
```html
@@ -110,16 +98,12 @@ The examples use the vanilla JavaScript / Bootstrap 5+ API: `new Selectpicker(el
```
-# Live search
-
----
-
## Live search
You can add a search input by passing `data-live-search="true"` attribute:
+ html={String.raw` `}
+/>
+
+```html
+
+```
+
+If you prefer a Bootstrap-style checkbox instead of the floating checkmark, set `selectionIndicator` to `checkbox`:
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## List-style menu
+
+Set `selectedItemsStyle` to `list` to render the removable selections as a stacked Bootstrap list group:
+
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Floating labels with visible tags
+
+When a tags-style picker is placed inside a Bootstrap 5 `form-floating` wrapper, the selected tags stay visible inside the control after the menu closes, with balanced top and bottom spacing around the tags.
+
+
+
+
+ `}
+/>
+
+```html
+
+
+
+
+```
+
+For remote-backed pickers, initialize with JavaScript and provide `source.create(callback, searchValue)` to save the new item before selecting it:
+
+```js
+new Selectpicker('#tag-editor', {
+ liveSearch: true,
+ showSelectedTags: true,
+ openOptions: true,
+ source: {
+ data: function (callback) {
+ callback(existingTags);
+ },
+ search: function (callback, page, searchValue) {
+ callback(filterTags(searchValue));
+ },
+ create: function (callback, searchValue) {
+ saveTag(searchValue).then(function (tag) {
+ callback({
+ text: tag.displayText,
+ value: tag.id
+ });
+ });
+ }
+ }
+});
+```
+
# Limit the number of selections
Limit the number of options that can be selected via the `data-max-options` attribute. It also works for option groups. Customize the message displayed when the limit is reached with `maxOptionsText`.
@@ -204,7 +371,7 @@ Use the `placeholder` attribute to set the default placeholder text when nothing
-