Components
Selection controls
Use native selects, checkboxes, and radio buttons for familiar, keyboard-accessible choices.
Usage & approach
Select for one option from a longer list, radios for a small visible set, and checkboxes for independent choices. Group related choices in a fieldset with a legend. The native dropdown follows browser rendering. Keep a generous label hit area.
Specifications
- Select
- min-h-11 w-full rounded-md border
- Checkbox / radio
- size-4 accent-[#006838] dark:accent-[#006838]
- Group
- fieldset + legend; space-y-3
- Target area
- flex min-h-11 items-center gap-3
Plan and preferences
Native controls work in the preview; selections are not submitted or saved.
<div class="grid gap-6 sm:grid-cols-2">
<div><label for="destination" class="text-sm font-medium">Destination region</label><select id="destination" name="destination" class="ui-form-field mt-2 block min-h-11 w-full rounded-md border border-[#c7d4c9] bg-white px-3 py-2 text-sm text-[#183d2c] placeholder:text-[#808080] focus:border-[#006838] focus:outline-2 focus:outline-[#006838] dark:border-[#565c58] dark:bg-[#1c1e1e] dark:text-[#f4f5f2] dark:placeholder:text-[#b2b7b4] dark:focus:border-[#006838] dark:focus:outline-[#006838]"><option value="">Select a region</option><option>Asia</option><option>Europe</option><option>Worldwide</option></select></div>
<fieldset><legend class="text-sm font-medium">Plan level</legend><label class="flex min-h-11 items-center gap-3 text-sm"><input type="radio" name="plan" value="essential" checked class="size-4 accent-[#006838] dark:accent-[#006838]"> Essential</label><label class="flex min-h-11 items-center gap-3 text-sm"><input type="radio" name="plan" value="plus" class="size-4 accent-[#006838] dark:accent-[#006838]"> Plus</label></fieldset>
<label class="flex min-h-11 items-center gap-3 text-sm sm:col-span-2"><input type="checkbox" name="email_updates" class="size-4 rounded accent-[#006838] dark:accent-[#006838]"> Send policy updates by email</label>
</div>HTML + Tailwind CSS · fit to panel
Bring this into your project
Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.