```html
```
# Live search
---
## Live search
You can add a search input by passing `data-live-search="true"` attribute:
## 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
Using the `title` attribute will 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:
```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 select title (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:
```html
```
## Custom content
Insert custom HTML into the option with the `data-content` attribute:
```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 to a specific element, e.g. `container: 'body'` or `data-container=".main-content"`
```html
```
## 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.