Form Components
A comprehensive collection of form components built with Tailwind CSS and no other dependencies.
Installation
1. Custom CSS
Here are the custom CSS classes that we used on Rails Blocks to style the form components. You can copy and paste these into your own CSS file to style & personalize your forms.
/* Forms */
label,
.label {
@apply text-sm leading-6 font-medium text-gray-700;
@apply dark:text-gray-100;
}
.form-input[disabled] {
@apply cursor-not-allowed bg-neutral-200;
}
/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-width: 1px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
.form-control {
@apply block w-full rounded-lg bg-white border-0 px-3 py-2 text-base leading-6 text-neutral-900 shadow-sm ring-1 ring-neutral-300 outline-none ring-inset placeholder:text-neutral-500 focus:ring-2 focus:ring-neutral-600 dark:bg-neutral-700 dark:text-white dark:placeholder-neutral-300 dark:ring-neutral-600 dark:focus:ring-neutral-500;
}
@media (min-width: 640px) {
.form-control {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
.form-control[disabled] {
@apply cursor-not-allowed bg-neutral-100 dark:bg-neutral-600;
}
.form-control.error {
@apply border-red-400 ring-red-300 focus:ring-red-500 dark:border-red-600 dark:ring-red-500;
}
select:not([multiple]) {
@apply w-full appearance-none rounded-lg border-0 bg-white px-3 py-2 text-base leading-6 text-neutral-900 shadow-sm ring-1 ring-neutral-300 outline-none ring-inset focus:ring-2 focus:ring-neutral-600;
/* Custom dropdown arrow */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
padding-right: 2.5rem;
}
@media (min-width: 640px) {
select:not([multiple]) {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
/* Dark mode styling for single select */
@media (prefers-color-scheme: dark) {
select:not([multiple]) {
@apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dark:focus:ring-neutral-500;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
}
select:not([multiple])[disabled] {
@apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
}
select[multiple] {
@apply w-full rounded-lg rounded-r-none border-0 bg-white px-3 py-2.5 text-base leading-6 text-neutral-900 shadow-sm outline-1 -outline-offset-1 outline-neutral-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-neutral-600 dark:outline-neutral-600;
min-height: 120px;
}
select[multiple] option {
@apply rounded-md;
}
@media (min-width: 640px) {
select[multiple] {
font-size: 0.875rem; /* text-sm equivalent (14px) for larger screens */
}
}
/* Dark mode styling for multiple select */
@media (prefers-color-scheme: dark) {
select[multiple] {
@apply dark:bg-neutral-700 dark:text-white dark:ring-neutral-600 dark:focus:ring-neutral-500;
}
}
select[multiple][disabled] {
@apply cursor-not-allowed bg-neutral-100 opacity-75 ring-neutral-200 dark:bg-neutral-600 dark:ring-neutral-500;
}
option {
@apply bg-white px-3 py-2 text-sm text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100;
}
option:checked {
@apply bg-neutral-100 dark:bg-neutral-600;
}
option:hover {
@apply bg-neutral-50 dark:bg-neutral-600;
}
.form-hint {
@apply text-xs text-neutral-600 italic dark:text-neutral-300/75;
}
.form-hint.error {
@apply mt-1 text-sm leading-normal text-red-500 italic;
}
.caret {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-neutral-800;
}
[type="checkbox"] {
@apply size-4 cursor-pointer appearance-none rounded-sm border border-neutral-300 bg-white checked:border-neutral-700 checked:bg-neutral-800 indeterminate:border-neutral-700 indeterminate:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-white/20 dark:checked:bg-neutral-900 dark:indeterminate:border-neutral-500 dark:indeterminate:bg-neutral-600 dark:focus-visible:outline-neutral-200 dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
}
[type="checkbox"]:checked {
@apply text-white dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type="checkbox"]:indeterminate {
@apply border-neutral-300 bg-neutral-800 text-white dark:border-neutral-600 dark:!bg-neutral-700 dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' %3e%3cline x1='10.75' y1='6' x2='1.25' y2='6'%3e%3c/line%3e%3c/g%3e%3c/svg%3e");
background-size: 75% 75%;
background-position: center;
background-repeat: no-repeat;
}
[type="checkbox"]:disabled {
@apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
}
[type="checkbox"]:disabled:checked {
@apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
}
[type="checkbox"]:indeterminate:hover {
@apply bg-neutral-800 dark:border-neutral-600 dark:!bg-neutral-700;
}
[type="radio"] {
@apply size-4 cursor-pointer appearance-none rounded-full border border-neutral-300 bg-white checked:border-neutral-700 checked:bg-neutral-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:border-neutral-300 disabled:bg-neutral-100 disabled:checked:bg-neutral-100 dark:border-white/20 dark:bg-neutral-800 dark:checked:border-white/20 dark:checked:bg-neutral-900 dark:focus-visible:outline-neutral-200 dark:disabled:border-neutral-500 dark:disabled:bg-neutral-400 dark:disabled:checked:bg-neutral-500 forced-colors:appearance-auto;
}
[type="radio"]:checked {
@apply text-white dark:text-neutral-800;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type="radio"]:disabled {
@apply cursor-not-allowed border-neutral-300 bg-neutral-300 text-neutral-400 opacity-75 hover:text-neutral-300 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:text-neutral-500;
}
[type="radio"]:disabled:checked {
@apply border-neutral-300 dark:border-neutral-600 dark:bg-neutral-600;
}
/* Datalist styling */
input[list] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Replace default datalist arrow in WebKit browsers */
input[list].replace-default-datalist-arrow::-webkit-calendar-picker-indicator {
display: none !important;
-webkit-appearance: none !important;
}
input[list].replace-default-datalist-arrow {
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25em 1.25em;
}
/* Dark mode datalist arrow */
@media (prefers-color-scheme: dark) {
input[list].replace-default-datalist-arrow {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23A1A1AA' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
}
Examples
Form fields
Form fields with labels and inputs.
<form action="#" class="w-full max-w-sm">
<div class="mb-6 relative gap-y-1.5">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" placeholder="Enter your name...">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter your email..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="website">Website</label>
<input type="url" name="website" placeholder="Enter your website..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="phone">Phone</label>
<input type="tel" name="phone" placeholder="Enter your phone..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Enter your password..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="date">Date</label>
<input type="date" name="date" placeholder="Enter your date..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="time">Time</label>
<input type="time" name="time" placeholder="Enter your time..." class="form-control">
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="name">Disabled</label>
<input type="text" name="name" class="form-control" placeholder="Michael Scott" disabled>
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="name">Readonly</label>
<input type="text" name="name" class="form-control" placeholder="Jim Halpert" readonly>
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="website">Website</label>
<input type="url" name="website" class="form-control error" value="My Website">
<p class="form-hint error">Please enter a valid URL</p>
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="file">File upload</label>
<div class="relative">
<input type="file" id="file-upload" class="sr-only" onchange="updateFileName(this)">
<label for="file-upload" class="flex items-center gap-2 cursor-pointer rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-400 hover:bg-neutral-100 focus-within:ring-2 focus-within:ring-neutral-600 focus-within:ring-offset-2 dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-700">
<span class="shrink-0">Choose File</span>
<span id="file-name" class="truncate text-neutral-500 dark:text-neutral-400 text-xs">No file chosen</span>
</label>
</div>
</div>
<script>
function updateFileName(input) {
const fileName = input.files[0]?.name || 'No file chosen';
document.getElementById('file-name').textContent = fileName;
}
</script>
<div class="mb-6 relative gap-y-1.5">
<label for="favorite-game">Favorite Game</label>
<select name="favorite-game" id="favorite-game">
<option value="" selected>Choose a game</option>
<option value="minecraft">Minecraft</option>
<option value="fortnite">Fortnite</option>
<option value="roblox">Roblox</option>
<option value="league-of-legends">League of Legends</option>
<option value="valorant">Valorant</option>
<option value="apex-legends">Apex Legends</option>
<option value="overwatch">Overwatch</option>
<option value="call-of-duty">Call of Duty</option>
<option value="battlefield">Battlefield</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="favorite-games">Favorite Games</label>
<select name="favorite-games" id="favorite-games" class="space-y-1" multiple>
<option value="" disabled class="cursor-not-allowed border-b !rounded-b-none border-neutral-200 dark:border-neutral-600">Choose games</option>
<option value="minecraft">Minecraft</option>
<option value="fortnite">Fortnite</option>
<option value="roblox">Roblox</option>
<option value="league-of-legends">League of Legends</option>
<option value="valorant">Valorant</option>
<option value="apex-legends">Apex Legends</option>
<option value="overwatch">Overwatch</option>
<option value="call-of-duty">Call of Duty</option>
<option value="battlefield">Battlefield</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-6 relative gap-y-1.5">
<label for="industry_disabled">Industry (Disabled)</label>
<select name="industry_disabled" id="industry_disabled" disabled>
<option value="minecraft">Minecraft</option>
<option value="fortnite">Fortnite</option>
<option value="roblox">Roblox</option>
<option value="league-of-legends">League of Legends</option>
<option value="valorant">Valorant</option>
<option value="apex-legends">Apex Legends</option>
<option value="overwatch">Overwatch</option>
</select>
</div>
<div class="mb-6 relative gap-y-1.5 flex flex-col gap-1">
<div class="flex items-center gap-x-3">
<input type="checkbox" id="checked-checkbox" checked>
<label for="checked-checkbox" class="inline-block">Styled checkbox</label>
</div>
<div class="flex items-center gap-x-3">
<input type="checkbox" id="checkbox">
<label for="checkbox" class="inline-block">Styled checkbox</label>
</div>
<div class="flex items-center gap-x-3">
<input type="checkbox" id="disabled-checkbox" disabled>
<label for="disabled-checkbox" class="inline-block">Disabled checkbox</label>
</div>
</div>
<div class="flex flex-col gap-4 mb-6">
<label class="group flex items-center gap-x-3 cursor-pointer justify-between w-full">
<span class="mr-2 text-sm font-medium flex items-center">
Tailwind Switch
</span>
<div class="relative">
<input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
<!-- Background element -->
<div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
<!-- Round element with icons inside -->
<div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800">
</div>
</div>
</label>
<label class="group flex items-center cursor-pointer justify-between w-full">
<span class="mr-2 text-sm font-medium flex items-center">
Tailwind Switch with icons
</span>
<div class="relative">
<input type="checkbox" class="sr-only peer" name="tailwind_switch" id="tailwind_switch">
<!-- Background element -->
<div class="w-10 h-6 bg-neutral-200 border border-black/10 rounded-full transition-all duration-150 ease-in-out cursor-pointer group-hover:bg-[#dcdcdb] peer-checked:bg-[#404040] peer-checked:group-hover:bg-neutral-600 peer-checked:border-white/10 dark:bg-neutral-700 dark:border-white/10 dark:group-hover:bg-neutral-600 dark:peer-checked:bg-neutral-50 dark:peer-checked:group-hover:bg-neutral-100 dark:peer-checked:border-black/20 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-neutral-600 dark:peer-focus-visible:outline-neutral-200"></div>
<!-- Round element with icons inside -->
<div class="absolute top-[3px] left-[3px] w-[18px] h-[18px] bg-white rounded-full shadow-sm transition-all duration-150 ease-in-out peer-checked:translate-x-4 flex items-center justify-center dark:bg-neutral-200 dark:peer-checked:bg-neutral-800">
<!-- X icon for unchecked state -->
<svg class="w-3 h-3 text-neutral-400 transition-all duration-150 ease-in-out group-has-[:checked]:opacity-0 dark:text-neutral-500" fill="none" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- Checkmark icon for checked state -->
<svg class="absolute w-3 h-3 text-neutral-700 transition-all duration-150 ease-in-out opacity-0 group-has-[:checked]:opacity-100 dark:text-neutral-100" fill="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" fill="currentColor"/>
</svg>
</div>
</div>
</label>
</div>
<div class="mb-6 relative gap-y-1.5 flex flex-col gap-1">
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="checked-radio" checked>
<label for="checked-radio" class="inline-block">Styled radio</label>
</div>
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="radio">
<label for="radio" class="inline-block">Styled radio</label>
</div>
<div class="flex items-center gap-x-3">
<input name="radio" type="radio" id="disabled-radio" disabled>
<label for="disabled-radio" class="inline-block">Disabled radio</label>
</div>
</div>
</form>Datalist
Datalist with labels and inputs.
<form action="#" class="w-full max-w-sm space-y-6">
<!-- Text Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="fruits">Fruits (Text with Datalist)</label>
<input type="text" id="fruits" list="fruits-list" class="form-control replace-default-datalist-arrow" placeholder="Choose or type a fruit...">
<datalist id="fruits-list">
<option value="Apple">
<option value="Orange">
<option value="Peach">
<option value="Melon">
<option value="Strawberry">
<option value="Banana">
<option value="Grape">
<option value="Pineapple">
</datalist>
</div>
<!-- Date Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="important-date">Important Date (Date with Datalist)</label>
<input type="date" id="important-date" list="date-list" class="form-control">
<datalist id="date-list">
<option value="2025-01-01" label="New Year's Day">
<option value="2025-07-04" label="Independence Day">
<option value="2025-12-25" label="Christmas Day">
<option value="2025-10-31" label="Halloween">
<option value="2025-02-14" label="Valentine's Day">
</datalist>
</div>
<!-- Time Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="meeting-time">Meeting Time (Time with Datalist)</label>
<input type="time" id="meeting-time" list="time-list" class="form-control">
<datalist id="time-list">
<option value="09:00" label="Morning Start">
<option value="12:00" label="Lunch Time">
<option value="14:00" label="Afternoon">
<option value="17:00" label="End of Day">
<option value="19:00" label="Evening">
</datalist>
</div>
<!-- DateTime-Local Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="event-datetime">Event DateTime (DateTime-Local with Datalist)</label>
<input type="datetime-local" id="event-datetime" list="datetime-list" class="form-control">
<datalist id="datetime-list">
<option value="2025-12-24T18:00" label="Christmas Eve Dinner">
<option value="2025-12-31T23:59" label="New Year's Eve">
<option value="2025-01-01T00:00" label="New Year's Day">
<option value="2025-07-04T12:00" label="Independence Day">
</datalist>
</div>
<!-- Month Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="birth-month">Birth Month (Month with Datalist)</label>
<input type="month" id="birth-month" list="month-list" class="form-control">
<datalist id="month-list">
<option value="2025-01" label="January 2025">
<option value="2025-06" label="June 2025">
<option value="2025-12" label="December 2025">
<option value="2026-01" label="January 2026">
</datalist>
</div>
<!-- Week Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="project-week">Project Week (Week with Datalist)</label>
<input type="week" id="project-week" list="week-list" class="form-control">
<datalist id="week-list">
<option value="2025-W01" label="First week of 2025">
<option value="2025-W26" label="Mid-year week">
<option value="2025-W52" label="Last week of 2025">
<option value="2025-W13" label="Q1 End">
</datalist>
</div>
<!-- Email Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="email-domain">Email (Email with Domain Suggestions)</label>
<input type="email" id="email-domain" list="email-list" class="form-control replace-default-datalist-arrow" placeholder="Enter your email...">
<datalist id="email-list">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
<option value="[email protected]">
</datalist>
</div>
<!-- URL Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="website-url">Website (URL with Datalist)</label>
<input type="url" id="website-url" list="url-list" class="form-control replace-default-datalist-arrow" placeholder="Enter website URL...">
<datalist id="url-list">
<option value="https://github.com">
<option value="https://stackoverflow.com">
<option value="https://developer.mozilla.org">
<option value="https://tailwindcss.com">
<option value="https://rubyonrails.org">
</datalist>
</div>
<!-- Number Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="age-range">Age Range (Number with Datalist)</label>
<input type="number" id="age-range" min="0" max="120" list="age-list" class="form-control replace-default-datalist-arrow" placeholder="Enter your age...">
<datalist id="age-list">
<option value="18" label="Adult">
<option value="21" label="Legal drinking age">
<option value="25" label="Quarter century">
<option value="30" label="Thirty">
<option value="40" label="Forty">
<option value="50" label="Half century">
<option value="65" label="Retirement age">
</datalist>
</div>
<!-- Search Input with Datalist -->
<div class="mb-6 relative gap-y-1.5">
<label for="search-terms">Search (Search with Datalist)</label>
<input type="search" id="search-terms" list="search-list" class="form-control replace-default-datalist-arrow" placeholder="Search for something...">
<datalist id="search-list">
<option value="JavaScript tutorials">
<option value="Ruby on Rails guide">
<option value="CSS flexbox">
<option value="HTML5 features">
<option value="Web accessibility">
<option value="Responsive design">
</datalist>
</div>
</form>