get started
theming
Select
Displays a list of options for the user to pick from
<form class="space-y-4 max-w-xs w-full" data-shade="900">
<div class="field">
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select class="input variant-plain sz-md appearance-none" placeholder="Select an option">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
<div class="field">
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select class="input variant-bottomOutlined sz-md appearance-none" placeholder="Select an option">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
<div class="field">
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select class="input variant-soft sz-md appearance-none" placeholder="Select an option">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
<div class="field">
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select class="input variant-outlined sz-md appearance-none" placeholder="Select an option">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
<div class="field">
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select class="input variant-mixed sz-md appearance-none" placeholder="Select an option">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
</form>Reference
Input
The input component have the following props
Prop
Type
Usage
sizeenumsz-[size]variantenumvariant-[variant]With label
<form class="space-y-4 max-w-xs w-full" data-shade="900">
<div class="field">
<label class="text-title" for="options">Select Options</label>
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select id="options" class="input variant-mixed sz-md appearance-none">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
</div>
</form>With Caption
<form class="space-y-4 max-w-xs w-full" data-shade="900">
<div class="field">
<label class="text-title" for="options">Select Options</label>
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select id="options" class="input variant-mixed sz-md appearance-none">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
<span class="inline-block text-sm text-caption">Select description</span>
</div>
</form>Disabled
<form class="space-y-4 max-w-xs w-full" data-shade="900">
<div class="field">
<label class="text-title" for="options2">Select Options</label>
<div class="relative">
<svg class="absolute right-2.5 inset-y-0 my-auto text-body opacity-75 pointer-events-none" xmlns="http://www.w3.org/2000/svg" width="0.75rem" height="0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
<select disabled id="options2" class="input variant-mixed sz-md appearance-none">
<option value="1">Option 1 </option>
<option value="2">Option 2 </option>
<option value="3">Option 3 </option>
</select>
</div>
<span class="inline-block text-sm text-caption">Select description</span>
</div>
</form>
