Back to application components
Filters
Responsive filter components for sorting, searching, and refining content in ecommerce, dashboards, data tables, and search interfaces.
<div class="flex gap-4 sm:gap-6">
<details class="group relative">
<summary
class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Availability </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div
class="z-auto w-64 divide-y divide-gray-200 rounded border border-gray-200 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
>
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700"> 0 Selected </span>
<button
type="button"
class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
>
Reset
</button>
</div>
<fieldset class="p-3">
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option1"
/>
<span class="text-sm font-medium text-gray-700"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option2"
/>
<span class="text-sm font-medium text-gray-700"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option3"
/>
<span class="text-sm font-medium text-gray-700"> Option 3 </span>
</label>
</div>
</fieldset>
</div>
</details>
<details class="group relative">
<summary
class="flex items-center gap-2 border-b border-gray-300 pb-1 text-gray-700 transition-colors hover:border-gray-400 hover:text-gray-900 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Price </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div
class="z-auto w-64 divide-y divide-gray-200 rounded border border-gray-200 bg-white shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
>
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700"> Max price is $600 </span>
<button
type="button"
class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
>
Reset
</button>
</div>
<div class="flex items-center gap-3 p-3">
<label for="MinPrice">
<span class="text-sm text-gray-700"> Min </span>
<input
type="number"
id="MinPrice"
value="0"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
</label>
<label for="MaxPrice">
<span class="text-sm text-gray-700"> Max </span>
<input
type="number"
id="MaxPrice"
value="600"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
</label>
</div>
</div>
</details>
</div>Plugins: @tailwindcss/forms
<div class="flex gap-4 sm:gap-6">
<details class="group relative">
<summary
class="flex items-center gap-2 border-b border-gray-300 dark:border-gray-600 pb-1 text-gray-700 dark:text-gray-200 transition-colors hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Availability </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div
class="z-auto w-64 divide-y divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
>
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700 dark:text-gray-200"> 0 Selected </span>
<button
type="button"
class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
>
Reset
</button>
</div>
<fieldset class="p-3">
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option1"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option2"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option3"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
</label>
</div>
</fieldset>
</div>
</details>
<details class="group relative">
<summary
class="flex items-center gap-2 border-b border-gray-300 dark:border-gray-600 pb-1 text-gray-700 dark:text-gray-200 transition-colors hover:border-gray-400 dark:hover:border-gray-500 hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Price </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div
class="z-auto w-64 divide-y divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm group-open:absolute group-open:start-0 group-open:top-8"
>
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700 dark:text-gray-200"> Max price is $600 </span>
<button
type="button"
class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
>
Reset
</button>
</div>
<div class="flex items-center gap-3 p-3">
<label for="MinPrice">
<span class="text-sm text-gray-700 dark:text-gray-200"> Min </span>
<input
type="number"
id="MinPrice"
value="0"
class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
/>
</label>
<label for="MaxPrice">
<span class="text-sm text-gray-700 dark:text-gray-200"> Max </span>
<input
type="number"
id="MaxPrice"
value="600"
class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
/>
</label>
</div>
</div>
</details>
</div>Plugins: @tailwindcss/forms
<div class="space-y-4">
<details class="group relative overflow-hidden rounded border border-gray-200 shadow-sm">
<summary
class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Availability </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div class="divide-y divide-gray-200 border-t border-gray-200 bg-white">
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700"> 0 Selected </span>
<button
type="button"
class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
>
Reset
</button>
</div>
<fieldset class="p-3">
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option1"
/>
<span class="text-sm font-medium text-gray-700"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option2"
/>
<span class="text-sm font-medium text-gray-700"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 shadow-sm"
id="Option3"
/>
<span class="text-sm font-medium text-gray-700"> Option 3 </span>
</label>
</div>
</fieldset>
</div>
</details>
<details class="group relative overflow-hidden rounded border border-gray-200 shadow-sm">
<summary
class="flex items-center justify-between gap-2 p-3 text-gray-700 transition-colors hover:text-gray-900 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Price </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div class="divide-y divide-gray-200 border-t border-gray-200 bg-white">
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700"> Max price is $600 </span>
<button
type="button"
class="text-sm text-gray-700 underline transition-colors hover:text-gray-900"
>
Reset
</button>
</div>
<div class="flex items-center gap-3 p-3">
<label for="MinPrice">
<span class="text-sm text-gray-700"> Min </span>
<input
type="number"
id="MinPrice"
value="0"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
</label>
<label for="MaxPrice">
<span class="text-sm text-gray-700"> Max </span>
<input
type="number"
id="MaxPrice"
value="600"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
</label>
</div>
</div>
</details>
</div>Plugins: @tailwindcss/forms
<div class="space-y-4">
<details class="group relative overflow-hidden rounded border border-gray-200 dark:border-gray-700 shadow-sm">
<summary
class="flex items-center justify-between gap-2 p-3 text-gray-700 dark:text-gray-200 transition-colors hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Availability </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700 dark:text-gray-200"> 0 Selected </span>
<button
type="button"
class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
>
Reset
</button>
</div>
<fieldset class="p-3">
<legend class="sr-only">Checkboxes</legend>
<div class="flex flex-col items-start gap-3">
<label for="Option1" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option1"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 1 </span>
</label>
<label for="Option2" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option2"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 2 </span>
</label>
<label for="Option3" class="inline-flex items-center gap-3">
<input
type="checkbox"
class="size-5 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 shadow-sm"
id="Option3"
/>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Option 3 </span>
</label>
</div>
</fieldset>
</div>
</details>
<details class="group relative overflow-hidden rounded border border-gray-200 dark:border-gray-700 shadow-sm">
<summary
class="flex items-center justify-between gap-2 p-3 text-gray-700 dark:text-gray-200 transition-colors hover:text-gray-900 dark:hover:text-gray-50 [&::-webkit-details-marker]:hidden"
>
<span class="text-sm font-medium"> Price </span>
<span class="transition-transform group-open:-rotate-180">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</span>
</summary>
<div class="divide-y divide-gray-200 dark:divide-gray-700 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
<div class="flex items-center justify-between px-3 py-2">
<span class="text-sm text-gray-700 dark:text-gray-200"> Max price is $600 </span>
<button
type="button"
class="text-sm text-gray-700 dark:text-gray-200 underline transition-colors hover:text-gray-900 dark:hover:text-gray-50"
>
Reset
</button>
</div>
<div class="flex items-center gap-3 p-3">
<label for="MinPrice">
<span class="text-sm text-gray-700 dark:text-gray-200"> Min </span>
<input
type="number"
id="MinPrice"
value="0"
class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
/>
</label>
<label for="MaxPrice">
<span class="text-sm text-gray-700 dark:text-gray-200"> Max </span>
<input
type="number"
id="MaxPrice"
value="600"
class="mt-0.5 w-full rounded border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-50 dark:ring-offset-gray-900 shadow-sm sm:text-sm"
/>
</label>
</div>
</div>
</details>
</div>Plugins: @tailwindcss/forms