Select
Native HTML select dropdown with styled wrapper.
Native Select
Plain <select> with no DaisyUI classes — the browser's
own rendering, included as a baseline reference.
Styled Native Select
Same native element, styled with DaisyUI's select classes —
still a real <select>, so it keeps full native
keyboard, screen-reader, and mobile picker behavior for free.
Small
Medium (default)
Large
<select class="select select-bordered w-full">
<option value="">Select a country…</option>
<option value="id">Indonesia</option>
</select>Grouped Options
Native <optgroup> sections options under a label —
no DaisyUI or custom CSS needed, the browser renders the grouping.
Custom Dropdown
Each option needs a color swatch and a description line, which a
native <option> can't render — full keyboard
navigation (arrows, enter, escape) is still implemented so it's
not a regression versus the native element it replaces.
- ✓
<div class="sc-csel" x-data="customSelect({ items: plans, initial: 'starter' })">
<button @click="toggle()">...</button>
<ul x-show="open">
<template x-for="item in items" :key="item.value">
<li @click="choose(item)">...</li>
</template>
</ul>
</div>States
Disabled, error, and success states using DaisyUI's color modifiers.
Disabled
Error
Country is required.Success
Looks good.
Reach for the native <select> (Variants 1–3) whenever option
content is plain text — it's free, accessible, and works on every device's own
picker UI. Reach for the custom dropdown (Variant 4) only when an option needs
markup a native <option> can't render, like the swatch and
description here. For search or tagging within a select, see
Tom Select instead of building
another custom dropdown.