Form Select

Copy

<div class="preview-content grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Default</label>
<select class="form-input block w-full bg-white border-border-color rounded-lg focus:border-primary disabled:opacity-50 disabled:pointer-events-none" id="choices-single-no-sorting" name="choices-single-no-sorting" data-choices data-choices-sorting-false>
    <option value="Madrid">Madrid</option>
    <option value="Toronto">Toronto</option>
    <option value="Vancouver">Vancouver</option>
    <option value="London">London</option>
    <option value="Manchester">Manchester</option>
    <option value="Liverpool">Liverpool</option>
    <option value="Paris">Paris</option>
    <option value="Malaga">Malaga</option>
    <option value="Washington" disabled>Washington</option>
    <option value="Lyon">Lyon</option>
    <option value="Marseille">Marseille</option>
    <option value="Hamburg">Hamburg</option>
    <option value="Munich">Munich</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Berlin">Berlin</option>
    <option value="Montreal">Montreal</option>
    <option value="New York">New York</option>
    <option value="Michigan">Michigan</option>
</select>
    </div>
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Options added</label>
<select class="form-input block w-full bg-white border-border-color rounded-lg focus:border-primary disabled:opacity-50 disabled:pointer-events-none" id="choices-single-no-search" name="choices-single-no-search" data-choices data-choices-search-false data-choices-remove-item>
    <option value="Zero">Zero</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
    <option value="Six">Six</option>
</select>
    </div>
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Multiple Select</label>
<select class="form-control" id="choices-multiple-default" data-choices name="choices-multiple-default" multiple>
    <option value="Choice 1" selected>Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    <option value="Choice 4">Choice 4</option>
</select>
    </div>
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Multiple Select With Remove</label>
<select class="form-control" id="choices-multiple-remove-button" data-choices data-choices-remove-item name="choices-multiple-remove-button" multiple>
    <option value="Choice 1" selected>Choice 1</option>
    <option value="Choice 2">Choice 2</option>
    <option value="Choice 3">Choice 3</option>
    <option value="Choice 4">Choice 4</option>
</select>
    </div>
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Text Inputs With Remove</label>
<input class="form-control" id="choices-text-remove-button" data-choices data-choices-limit="3" data-choices-remove-item type="text" value="Task-1">
    </div>
    <div class="mb-4">
<label class="block text-sm font-medium mb-2 text-dark">Text Inputs Add </label>
<input class="form-control" id="choices-text-unique-values" data-choices data-choices-text-unique-true type="text" value="Project-A, Project-B">
    </div>
</div>