Select, checkbox and toggle
Besides text fields, forms need choice controls: a dropdown list, a checkbox, a toggle. In daisyUI each has its own class — select, checkbox, radio and toggle. They all style standard form tags, so they are submitted with the form as usual.
A select
The select class goes on the <select> tag:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<select class="select m-4">
<option disabled selected>Choose a course</option>
<option>HTML basics</option>
<option>JavaScript from scratch</option>
<option>Flexbox layouts</option>
</select>A field with an arrow on the right; clicking it opens the system list of courses. The first option with disabled selected acts as a prompt: it is visible at first but cannot be chosen. select-primary and select-sm change the color and size, as with input.
Checkbox and radio
checkbox styles a checkbox, radio a radio button. The caption is a <label class="label"> tag with the control inside it:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<fieldset class="fieldset p-4">
<legend class="fieldset-legend">Learning format</legend>
<label class="label">
<input type="radio" name="format" class="radio radio-primary" checked>
Self-paced — $19
</label>
<label class="label">
<input type="radio" name="format" class="radio radio-primary">
With a mentor — $49
</label>
<label class="label mt-2">
<input type="checkbox" class="checkbox" checked>
Send me course news
</label>
</fieldset>Two purple radio buttons and a checkbox under them. Clicking the caption text also toggles the control, because it sits inside the <label>.
The toggle
A toggle is the same checkbox, drawn as an on/off switch. It suits settings that apply right away:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<fieldset class="fieldset w-xs rounded-box border border-base-300 bg-base-200 p-4">
<legend class="fieldset-legend">Notifications</legend>
<label class="label">
<input type="checkbox" class="toggle toggle-success" checked>
Remind me about lessons
</label>
<label class="label">
<input type="checkbox" class="toggle">
Discount emails
</label>
</fieldset>A dashboard settings panel: the first toggle is on and green, the second is off.
| Element | Class | When to use |
|---|---|---|
<select> | select | One option from a long list |
<input type="radio"> | radio | One option out of 2–5 visible ones |
<input type="checkbox"> | checkbox | Consent, picking several items |
<input type="checkbox"> | toggle | An on/off setting |
Common mistake
Putting a checkbox and its text side by side without a <label>:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="p-4">
<input type="checkbox" class="checkbox">
Send me course news
</div>It looks similar, but clicking the text does nothing — you have to hit the small square, and a screen reader does not know what the checkbox is for. Wrap the control together with its text in a <label class="label">.