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>