+
+ `}
+/>
+
+```html
+
+```
+
+
+
+## Select boxes with optgroups
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Multiple select boxes
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+# Live search
+
+---
+
+## Live search
+
+You can add a search input by passing `data-live-search="true"` attribute:
+
+
+
+
+
+ `}
+ className="no-code"
+/>
+
+## Key words
+
+Add key words to options to improve their searchability using `data-tokens`.
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+# 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`.
+
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+
+
+```
+
+# Custom button text
+
+---
+
+## Placeholder
+
+Use the `placeholder` attribute to set the default placeholder text when nothing is selected. This works for both multiple and standard select boxes:
+
+
+
+
+
+
+
+
+
+
`}
+/>
+
+```html
+
+```
+
+## Selected text
+
+
+Set the `title` attribute on individual options to display alternative text when the option is selected:
+
+
+
+
+
+ `}
+ className="no-code"
+/>
+
+```html
+
+```
+## Selected text format
+
+
+Specify how the selection is displayed with the `data-selected-text-format` attribute on a multiple select.
+
+The supported values are:
+
+* `values`: A comma delimited list of selected values (default)
+* `count`: If one item is selected, then the option value is shown. If more than one is selected then the number of selected items is displayed, e.g. `2 of 6 selected`
+* `count > x`: Where `x` is the number of items selected when the display format changes from `values` to `count`
+* `static`: Always show the placeholder, regardless of selection
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+# Styling
+
+---
+
+## Button classes
+
+You can set the button classes via the `data-style` attribute:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`}
+/>
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## Checkmark on selected option
+
+You can also show the checkmark icon on standard select boxes with the `show-tick` class:
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Menu arrow
+
+The Bootstrap menu arrow can be added with the `show-menu-arrow` class:
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Style individual options
+
+
+Classes and styles added to options are transferred to the select box:
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+```css
+.special {
+ font-weight: bold !important;
+ color: #fff !important;
+ background: #bc0000 !important;
+ text-transform: uppercase;
+}
+```
+
+## Width
+
+
+Wrap selects in grid columns, or any custom parent element, to easily enforce desired widths.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`}
+/>
+
+```html
+
+
+
+
+
+
+
+```
+
+
+
+Alternatively, use the `data-width` attribute to set the width of the select. Set `data-width` to `'auto'` to automatically adjust the width of the select to its widest option. `'fit'` automatically adjusts the width of the select to the width of its currently selected option. An exact value can also be specified, e.g., `300px` or `50%`.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`}
+/>
+
+```html
+
+
+
+
+```
+
+# Customize options
+
+---
+
+## Icons
+
+Add an icon to an option or optgroup with the `data-icon` attribute:
+
+:::info Bootstrap 5 icons
+Bootstrap 5 does not include an icon font. To use Font Awesome or another icon library, set `iconBase` and `tickIcon` to match that library.
+:::
+
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Custom content
+
+Insert custom HTML into the option with the `data-content` attribute:
+
+:::warning Custom content is sanitized
+This feature inserts HTML into the DOM. By default, it is sanitized using our built-in [sanitizer](./options#sanitizer).
+:::
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Subtext
+Add subtext to an option or optgroup with the `data-subtext` attribute:
+
+
+
+
+
+
+
+ With showSubtext set to true.
+
`}
+/>
+
+```html
+
+```
+
+# Customize menu
+
+---
+
+## Menu size
+
+The `size` option is set to `'auto'` by default. When `size` is set to `'auto'`, the menu always opens up to show as many items as the window will allow without being cut off. Set `size` to `false` to always show all items. The size of the menu can also be specifed using the `data-size` attribute.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `}
+/>
+
+
+Specify a number for `data-size` to choose the maximum number of items to show in the menu.
+
+
+
+
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Select/deselect all options
+
+Adds two buttons to the top of the menu - **Select All** & **Deselect All** with `data-actions-box="true"`.
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Divider
+
+Add `data-divider="true"` to an option to turn it into a divider.
+
+
+
+
+
+
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Menu header
+
+Add a header to the dropdown menu, e.g. `header: 'Select a condiment'` or `data-header="Select a condiment"`
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Container
+
+Append the select menu to a specific element, e.g. `container: 'body'` or `data-container=".main-content"`. This is useful if the select element is inside an element with `overflow: hidden`.
+
+
+
+```
+
+## Dropup menu
+
+`dropupAuto` is set to true by default, which automatically determines whether or not the menu should display above or below the select box. If `dropupAuto` is set to false, manually make the select a dropup menu by adding the `.dropup` class to the select.
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+# Disabled
+
+---
+
+## Disabled select box
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Disabled options
+
+
+
+
+
+ `}
+/>
+
+```html
+
+```
+
+## Disabled option groups
+
+
+
+
+ `}
+/>
+
+```html
+
+```
\ No newline at end of file
diff --git a/docs/versioned_docs/version-1.0/index.md b/docs/versioned_docs/version-1.0/index.md
new file mode 100644
index 00000000..8760e710
--- /dev/null
+++ b/docs/versioned_docs/version-1.0/index.md
@@ -0,0 +1,102 @@
+---
+sidebar_position: 1
+title: Getting Started
+description: Install and use the CrestApps bootstrap-select fork with Bootstrap 5+.
+---
+
+# Getting Started
+
+:::info CrestApps fork
+This is the CrestApps fork of [snapappointments/bootstrap-select](https://github.com/snapappointments/bootstrap-select). It removes the jQuery dependency entirely, uses plain vanilla JavaScript, and supports Bootstrap 5+ only. Older Bootstrap and jQuery compatibility paths are intentionally out of scope so the library can stay small and forward-focused.
+:::
+
+## Quick start
+
+bootstrap-select requires **Bootstrap 5+** (CSS and JS, including its bundled Popper).
+jQuery is **not** required.
+
+Install with [npm](https://www.npmjs.com/package/crestapps-bootstrap-select):
+
+```sh
+npm install crestapps-bootstrap-select bootstrap
+```
+
+Load Bootstrap 5 first, then bootstrap-select's CSS and JS (after Bootstrap's JavaScript):
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## Using the CDN build
+
+After the package is published to npm, it will also be available through jsDelivr.
+Prefer pinning an explicit package version in production:
+
+```html
+
+
+
+
+
+
+
+```
+
+You can replace `@1.0.0` with the version you want to consume. During development,
+`@latest` also works, but a fixed version is safer for production deployments.
+
+When loaded via a `
+
+
+
+
+
+
+
+```
+
+## Using the CDN build
+
+After the package is published to npm, it will also be available through jsDelivr.
+Prefer pinning an explicit package version in production:
+
+```html
+
+
+
+
+
+
+
+```
+
+You can replace `@1.1.0` with the version you want to consume. During development,
+`@latest` also works, but a fixed version is safer for production deployments.
+
+When loaded via a `
+
+
+
+
+
+
+
+