Список, флажок и переключатель
Кроме текстовых полей формам нужны элементы выбора: выпадающий список, флажок, переключатель. В daisyUI у каждого свой класс — select, checkbox, radio и toggle. Все они оформляют стандартные теги формы, поэтому отправляются вместе с формой как обычно.
Выпадающий список
Класс select ставят на тег <select>:
<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>Выберите курс</option>
<option>Основы HTML</option>
<option>JavaScript с нуля</option>
<option>Вёрстка на Flexbox</option>
</select>Поле со стрелкой справа; при щелчке открывается системный список курсов. Первый пункт с disabled selected служит подсказкой: он виден сразу, но выбрать его нельзя. Цвет и размер меняют select-primary и select-sm, как у input.
Флажок и радиокнопка
checkbox оформляет флажок, radio — радиокнопку. Подпись делают тегом <label class="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>
<fieldset class="fieldset p-4">
<legend class="fieldset-legend">Формат обучения</legend>
<label class="label">
<input type="radio" name="format" class="radio radio-primary" checked>
Самостоятельно — $19
</label>
<label class="label">
<input type="radio" name="format" class="radio radio-primary">
С наставником — $49
</label>
<label class="label mt-2">
<input type="checkbox" class="checkbox" checked>
Присылать новости о курсах
</label>
</fieldset>Две радиокнопки фиолетового цвета и флажок под ними. Щелчок по тексту подписи тоже переключает элемент, потому что он лежит внутри <label>.
Переключатель
Toggle — тот же флажок, но в виде ползунка «включено — выключено». Он подходит для настроек, которые применяются сразу:
<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">Уведомления</legend>
<label class="label">
<input type="checkbox" class="toggle toggle-success" checked>
Напоминать о занятиях
</label>
<label class="label">
<input type="checkbox" class="toggle">
Письма о скидках
</label>
</fieldset>Панель настроек личного кабинета: первый переключатель включён и зелёный, второй выключен.
| Элемент | Класс | Когда использовать |
|---|---|---|
<select> | select | Один вариант из длинного списка |
<input type="radio"> | radio | Один вариант из 2–5 видимых |
<input type="checkbox"> | checkbox | Согласие, выбор нескольких пунктов |
<input type="checkbox"> | toggle | Настройка «включено — выключено» |
Частая ошибка
Поставить флажок и текст рядом без <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">
Присылать новости о курсах
</div>Выглядит похоже, но щелчок по тексту ничего не делает — попасть приходится в маленький квадрат, а программа чтения с экрана не знает, к чему относится флажок. Оборачивайте элемент вместе с текстом в <label class="label">.