English
Espanol
Japanese
Recently Browses
- Apps Api
- Dashboard Marketing
Memebers
-
Ethan Smith Backend Developer -
Isabella Garcia Digital Marketer -
Noah Walker Full Stack Developer
Filters
-
customers:
All customers list
-
products:
Bestselling products
-
events:
All upcoming events
Select
- Home
- Forms
- Select
Tom select
Tom select
Basic example
Multiple + Create new tag
Small size example
Large size example
<!--Css / Js Required-->
<link href="vendor/css/tom-select.min.css" rel="stylesheet">
<script src="vendor/js/tom-select.complete.min.js"></script>
Default select
Small
Default
Large
<!--Small-->
<div class="relative">
<select class="input input-sm appearance-none">
<option selected disabled>Select an option</option>
<option value="a">Plan A</option>
...
</select>
<span class="icon-[lucide--chevron-down] opacity-50 pointer-events-none absolute end-2 top-1/2 -translate-y-1/2"></span>
</div>
<!--Default-->
<div class="relative">
<select class="input appearance-none">
<option selected disabled>Select an option</option>
<option value="a">Plan A</option>
...
</select>
<span class="icon-[lucide--chevron-down] text-lg opacity-50 pointer-events-none absolute end-2 top-1/2 -translate-y-1/2"></span>
</div>
<!--Large-->
<div class="relative">
<select class="input input-lg appearance-none">
<option selected disabled>Select an option</option>
<option value="a">Plan A</option>
...
</select>
<span class="icon-[lucide--chevron-down] text-lg opacity-50 pointer-events-none absolute end-2 top-1/2 -translate-y-1/2"></span>
</div>