Choices
Configurable select box/text input plugin.
See Choices select box/text example with data attributes code below:
<!-- Choice select -->
<select class="form-select js-choice" data-search-enabled="true" multiple data-remove-item-button="true" data-position="bottom" data-max-item-count="3" data-placeholder="true">
<option value="PB">Public</option>
<option value="PV">Friends</option>
<option value="PV">Only me</option>
<option value="PV">Custom</option>
</select>
<!-- Choice input -->
<input class="form-control js-choice" type="text" data-placeholder="true" data-placeholder-val="Custom placeholder value" data-remove-item-button="true" data-max-item-count="2">
We have provided Choice data attributes so you don't need to play with JavaScrips or CSS. The list of data attributes type name and it's descriptions are provided below for the reference:
| Data Attributes name | Description | Available options |
|---|---|---|
| data-search-enabled="true" | Whether a search area should be shown | Boolean (true or false) |
| data-position="bottom" | Whether the dropdown should appear above (top) or below (bottom) the input. Default value is auto | "top" | "bottom" |
| data-max-item-count="3" | The amount of items a user can input/select | Numbers (1 2 3 4 5 6 ....) |
| multiple | Select multiple option | |
| data-remove-item-button="true" | Whether each item should have a remove button. | Boolean (true or false) |
| data-placeholder="true" | Whether the input should show a placeholder. | Boolean (true or false) |
| data-placeholder-val="Custom placeholder value" | The value of the inputs placeholder. | String |