@jarstone/dselect

1.0.4 • Public • Published

dselect

Dropdown select box for bootstrap 5

Demo

Features

  • Placeholder
  • Multiple
  • Search
  • Creatable
  • Clearable
  • Sizing
  • Validation

Installation

Install dselect with npm

npm install @jarstone/dselect

Install from cdn

<link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css">
<script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script>

Usage/Examples

<select class="form-select" id="dselect-example">
    <option value="chrome">Chrome</option>
    <option value="firefox">Firefox</option>
    <option value="safari">Safari</option>
    <option value="edge">Edge</option>
    <option value="opera">Opera</option>
    <option value="brave">Brave</option>
</select>
dselect(document.querySelector('#dselect-example'))

Options

const config = {
    search: false, // Toggle search feature. Default: false
    creatable: false, // Creatable selection. Default: false
    clearable: false, // Clearable selection. Default: false
    maxHeight: '360px', // Max height for showing scrollbar. Default: 360px
    size: '', // Can be "sm" or "lg". Default ''
}
dselect(document.querySelector('#dselect-example'), config)

options can also be set in "data-dselect-*" attribute

<select data-dselect-search="true" data-dselect-creatable="true" data-dselect-clearable="true" data-dselect-max-height="300px" data-dselect-size="sm" class="form-select" id="dselect-example">
...
</select>

Package Sidebar

Install

npm i @jarstone/dselect

Weekly Downloads

1,250

Version

1.0.4

License

MIT

Unpacked Size

163 kB

Total Files

13

Last publish

Collaborators

  • jarstone