Tagging
<input id="input-tags" value="awesome,neat" autocomplete="off" placeholder="How cool is this?">
// Basic new TomSelect("#input-tags",{ persist: false, createOnBlur: true, create: true });
Select Box
<select id="select-beast" placeholder="Select a person..." autocomplete="off"> <option value="">Select a person...</option> <option value="4">Thomas Edison</option> <option value="1">Nikola</option> <option value="3">Nikola Tesla</option> <option value="5">Arnold Schwarzenegger</option> </select>
// Select Box new TomSelect("#select-beast",{ create: true, sortField: { field: "text", direction: "asc" } });
Multi Select
<select id="select-state" name="state[]" multiple placeholder="Select a state..." autocomplete="off"> <option value="">Select a state...</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA" selected>California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY" selected>Wyoming</option> </select>
// Multi Select new TomSelect("#select-state",{ maxItems: 3 });
Disabled Option
<select id="select-beast-single-disabled" placeholder="Select a person..." autocomplete="off"> <option value="">Select a person...</option> <option value="4" disabled>Thomas Edison</option> <option value="1">Nikola</option> <option value="3" selected>Nikola Tesla</option> </select>
// Disabled Option new TomSelect("#select-beast-single-disabled",{ create: true, sortField: {field: "text"} });
Disabled Select
<select id="select-beast-disabled" class="form-select" disabled placeholder="Select a person..." autocomplete="off"> <option value="">Select a person...</option> <option value="4">Thomas Edison</option> <option value="1">Nikola</option> <option value="3" selected>Nikola Tesla</option> </select>efault</button>
// Disabled Select new TomSelect("#select-beast-disabled");
Copyright © 2024 DesignReset, All rights reserved.
Coded with