Basic example
<div
class="relative flex"
data-twe-input-wrapper-init
data-twe-input-group-ref>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput"
aria-describedby="basic-addon1" />
<label
for="exampleFormControlInput"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
<button
class="relative z-[2] -ms-0.5 flex items-center rounded-e bg-primary px-5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="button-addon1"
data-twe-ripple-init
data-twe-ripple-color="light">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</button>
</div>
// Initialization for ES Users
import {
Ripple,
Input,
initTWE,
} from "tw-elements";
initTWE({ Ripple, Input });
Variations
Search comes with plenty of variations. Choose from the following as needed:
- Search with icon
- Search with button
- Search without additional elements
Search with icon
<div class="relative flex">
<input
type="search"
class="relative m-0 block flex-auto rounded border border-solid border-neutral-200 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out placeholder:text-neutral-500 focus:z-[3] focus:border-primary focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:text-white dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput2"
aria-describedby="button-addon2" />
<span
class="flex items-center whitespace-nowrap px-3 py-[0.25rem] text-surface dark:border-neutral-400 dark:text-white [&>svg]:h-5 [&>svg]:w-5"
id="button-addon2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</div>
Search with button
<div class="relative flex">
<input
type="search"
class="relative m-0 -me-0.5 block flex-auto rounded-s border border-solid border-neutral-200 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out placeholder:text-neutral-500 focus:z-[3] focus:border-primary focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:text-white dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput3"
aria-describedby="button-addon3" />
<button
class="z-[2] inline-block rounded-e border-2 border-primary px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-primary transition duration-150 ease-in-out hover:border-primary-accent-300 hover:bg-primary-50/50 hover:text-primary-accent-300 focus:border-primary-600 focus:bg-primary-50/50 focus:text-primary-600 focus:outline-none focus:ring-0 active:border-primary-700 active:text-primary-700 dark:text-primary-500 dark:hover:bg-blue-950 dark:focus:bg-blue-950"
data-twe-ripple-init
data-twe-ripple-color="white"
type="button"
id="button-addon3">
Search
</button>
</div>
// Initialization for ES Users
import {
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Ripple });
Search without additional elements
<div class="relative">
<input
type="search"
class="relative m-0 block w-full rounded border border-solid border-neutral-200 bg-transparent bg-clip-padding px-3 py-[0.25rem] text-base font-normal leading-[1.6] text-surface outline-none transition duration-200 ease-in-out placeholder:text-neutral-500 focus:z-[3] focus:border-primary focus:shadow-inset focus:outline-none motion-reduce:transition-none dark:border-white/10 dark:text-white dark:placeholder:text-neutral-200 dark:autofill:shadow-autofill dark:focus:border-primary"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput4" />
</div>
Search event
<div
class="relative flex"
data-twe-input-wrapper-init
data-twe-input-group-ref>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="search-input"
aria-describedby="search-button" />
<label
for="search-input"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
<button
class="relative z-[2] -ms-0.5 flex items-center rounded-e bg-primary px-5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="search-button"
data-twe-ripple-init
data-twe-ripple-color="light">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</button>
</div>
// Initialization for ES Users
import {
Input,
initTWE,
} from "tw-elements";
initTWE({ Input });
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
searchButton.addEventListener('click', () => {
const inputValue = searchInput.value;
alert(inputValue);
});
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
searchButton.addEventListener('click', () => {
const inputValue = searchInput.value;
alert(inputValue);
});
Autocomplete
By adding extra JS code you can make your search input autocomplete as well.
Learn more about Autocomplete in the Autocomplete Docs
<div class="relative mb-4 flex justify-center">
<div
class="relative flex"
id="search-autocomplete"
data-twe-offset="-30,1"
data-twe-input-wrapper-init
data-twe-input-group-ref>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput5"
aria-describedby="basic-addon2" />
<label
for="exampleFormControlInput5"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
<button
class="relative z-[2] -ms-0.5 flex items-center rounded-e bg-primary px-5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong "
type="button"
id="button-addon2"
data-twe-ripple-init
data-twe-ripple-color="light">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
Input,
Autocomplete,
initTWE,
} from "tw-elements";
initTWE({ Ripple, Input });
const basicAutocomplete = document.querySelector('#search-autocomplete');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new Autocomplete(basicAutocomplete, {
filter: dataFilter,
});
const basicAutocomplete = document.querySelector('#search-autocomplete');
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
const dataFilter = (value) => {
return data.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new twe.Autocomplete(basicAutocomplete, {
filter: dataFilter,
});
Focus
You can make your input in search component focusable by pressing
ctrl + alt shortcut. You are able to easily change combinations
of shortcuts by modifing keys array in JS code. For example to
change ControlLeft to e key just swap it to
KeyE etc.
<div
class="relative flex"
data-twe-input-wrapper-init
data-twe-input-group-ref>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="search-focus"
aria-describedby="basic-addon4" />
<label
for="search-focus"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
<button
class="relative z-[2] -ms-0.5 flex items-center rounded-e bg-primary px-5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="button-addon4"
data-twe-ripple-init
data-twe-ripple-color="light">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</button>
</div>
// Initialization for ES Users
import {
Ripple,
Input,
initTWE,
} from "tw-elements";
initTWE({ Ripple, Input });
const searchFocus = document.getElementById('search-focus');
const keys = [
{ keyCode: 'AltLeft', isTriggered: false },
{ keyCode: 'ControlLeft', isTriggered: false },
];
window.addEventListener('keydown', (e) => {
keys.forEach((obj) => {
if (obj.keyCode === e.code) {
obj.isTriggered = true;
}
});
const shortcutTriggered = keys.filter((obj) => obj.isTriggered).length === keys.length;
if (shortcutTriggered) {
searchFocus.focus();
}
});
window.addEventListener('keyup', (e) => {
keys.forEach((obj) => {
if (obj.keyCode === e.code) {
obj.isTriggered = false;
}
});
});
const searchFocus = document.getElementById('search-focus');
const keys = [
{ keyCode: 'AltLeft', isTriggered: false },
{ keyCode: 'ControlLeft', isTriggered: false },
];
window.addEventListener('keydown', (e) => {
keys.forEach((obj) => {
if (obj.keyCode === e.code) {
obj.isTriggered = true;
}
});
const shortcutTriggered = keys.filter((obj) => obj.isTriggered).length === keys.length;
if (shortcutTriggered) {
searchFocus.focus();
}
});
window.addEventListener('keyup', (e) => {
keys.forEach((obj) => {
if (obj.keyCode === e.code) {
obj.isTriggered = false;
}
});
});
Navbar
Search is easily integrated with plenty of our components such as navbar.
Learn more about Navbar in the Navbar Docs
<nav
class="relative flex w-full flex-nowrap items-center justify-between bg-zinc-50 py-2 shadow-dark-mild dark:bg-neutral-700 lg:flex-wrap lg:justify-start"
data-twe-navbar-ref>
<div
class="flex w-full flex-wrap items-center justify-between px-3 py-1">
<div class="me-4 ms-2">
<a class="text-xl text-black dark:text-white" href="#">Brand</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-black/50 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
type="button"
data-twe-collapse-init
data-twe-target="#navbarSupportedContent5"
aria-controls="navbarSupportedContent5"
aria-expanded="false"
aria-label="Toggle navigation">
<!-- Hamburger icon -->
<span
class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor">
<path
fill-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<!-- Collapsible navbar container -->
<div
class="!visible mt-2 hidden flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto"
id="navbarSupportedContent5"
data-twe-collapse-item>
<!-- Left links -->
<ul
class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row"
data-twe-navbar-nav-ref>
<!-- Home link -->
<li
class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2"
data-twe-nav-item-ref>
<a
class="text-black dark:text-white"
aria-current="page"
href="#"
data-twe-nav-link-ref
>Home</a
>
</li>
<!-- Link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref>
<a
class="p-0 text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
data-twe-nav-link-ref
>Link</a
>
</li>
<!-- Dropdown link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-item-ref
data-twe-dropdown-ref>
<!-- Dropdown -->
<a
class="flex items-center text-black/60 transition duration-200 hover:text-black/80 hover:ease-in-out focus:text-black/80 active:text-black/80 dark:text-white/60 dark:hover:text-white/80 dark:focus:text-white/80 dark:active:text-white/80 lg:px-2"
href="#"
type="button"
id="dropdownMenuButton2"
data-twe-dropdown-toggle-ref
aria-expanded="false">
Dropdown
<span class="ms-1 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor">
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd" />
</svg>
</span>
</a>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<hr
class="my-2 h-0 border border-t-0 border-solid border-neutral-100 dark:border-white/10" />
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</li>
<!-- Disabled link -->
<li
class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0"
data-twe-nav-link-ref>
<a
class="pointer-events-none text-black/30 dark:text-white/30 lg:px-2"
>Disabled</a
>
</li>
</ul>
<!-- Search form -->
<div class="relative flex justify-center">
<div
class="relative flex"
id="navbar-search-autocomplete"
data-twe-offset="-30,1"
data-twe-input-wrapper-init
data-twe-input-group-ref>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="exampleFormControlInput6"
aria-describedby="basic-addon3" />
<label
for="exampleFormControlInput6"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
<button
class="relative z-[2] -ms-0.5 flex items-center rounded-e bg-primary px-5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong "
type="button"
id="button-addon3"
data-twe-ripple-init
data-twe-ripple-color="light">
<span class="[&>svg]:h-5 [&>svg]:w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</nav>
// Initialization for ES Users
import {
Ripple,
Input,
Autocomplete,
initTWE,
} from "tw-elements";
initTWE({ Ripple, Input });
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['One', 'Two', 'Three', 'Four', 'Five'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
const navbarAutocomplete = document.querySelector('#navbar-search-autocomplete');
const navbarData = ['One', 'Two', 'Three', 'Four', 'Five'];
const navbarDataFilter = (value) => {
return navbarData.filter((item) => {
return item.toLowerCase().startsWith(value.toLowerCase());
});
};
new twe.Autocomplete(navbarAutocomplete, {
filter: navbarDataFilter,
});
Dropdown
Moreover, you can integrate our search with dropdown component.
Learn more about Dropdowns in the Dropdowns Docs
<div class="relative" data-twe-dropdown-ref id="dropdown-search">
<button
class="mx-auto flex items-center rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
type="button"
id="dropdownMenuButton1"
data-twe-dropdown-toggle-ref
aria-expanded="false"
data-twe-ripple-init
data-twe-ripple-color="light">
Dropdown
</button>
<ul
class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg data-[twe-dropdown-show]:block dark:bg-surface-dark"
aria-labelledby="dropdownMenuButton1"
data-twe-dropdown-menu-ref>
<li>
<div class="relative mx-2 mt-2" data-twe-input-wrapper-init>
<input
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
id="search-input-dropdown"
aria-describedby="basic-addon1" />
<label
for="search-input-dropdown"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
</div>
</li>
<hr
class="my-2 h-0 border border-t-0 border-solid border-neutral-100 dark:border-white/10" />
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Another action</a
>
</li>
<li>
<a
class="block w-full whitespace-nowrap bg-white px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-zinc-200/60 focus:bg-zinc-200/60 focus:outline-none active:bg-zinc-200/60 active:no-underline dark:bg-surface-dark dark:text-white dark:hover:bg-neutral-800/25 dark:focus:bg-neutral-800/25 dark:active:bg-neutral-800/25"
href="#"
data-twe-dropdown-item-ref
>Something else here</a
>
</li>
</ul>
</div>
// Initialization for ES Users
import {
Ripple,
Input,
Dropdown,
initTWE,
} from "tw-elements";
const searchInputDropdown = document.getElementById('search-input-dropdown');
const dropdownOptions = document.querySelectorAll('#dropdown-search [data-twe-dropdown-item-ref]');
searchInputDropdown.addEventListener('input', () => {
const filter = searchInputDropdown.value.toLowerCase();
showOptions();
const valueExist = !!filter.length;
if (valueExist) {
dropdownOptions.forEach((el) => {
const elText = el.textContent.trim().toLowerCase();
const isIncluded = elText.includes(filter);
if (!isIncluded) {
el.classList.add("hidden")
}
});
}
});
const showOptions = () => {
dropdownOptions.forEach((el) => {
el.classList.remove("hidden")
})
}
const searchInputDropdown = document.getElementById('search-input-dropdown');
const dropdownOptions = document.querySelectorAll('#dropdown-search [data-twe-dropdown-item-ref]');
searchInputDropdown.addEventListener('input', () => {
const filter = searchInputDropdown.value.toLowerCase();
showOptions();
const valueExist = !!filter.length;
if (valueExist) {
dropdownOptions.forEach((el) => {
const elText = el.textContent.trim().toLowerCase();
const isIncluded = elText.includes(filter);
if (!isIncluded) {
el.classList.add("hidden")
}
});
}
});
const showOptions = () => {
dropdownOptions.forEach((el) => {
el.classList.remove("hidden")
})
}
Datatable
It works perfectly with TWE datatables.
Learn more about Datatables in the Datatables Docs
<div
class="relative mb-4 flex w-full flex-wrap items-stretch"
data-twe-input-wrapper-init>
<input
id="datatable-search-input"
type="search"
class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon10" />
<label
for="datatable-search-input"
class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
>Search
</label>
</div>
<div id="datatable-1"></div>
// Initialization for ES Users
import {
Ripple,
Input,
Datatable,
initTWE,
} from "tw-elements";
const data2 = {
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
rows: [
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
],
};
const instance = new Datatable(document.getElementById('datatable-1'), data2)
document.getElementById('datatable-search-input').addEventListener('input', (e) => {
instance.search(e.target.value);
});
const data2 = {
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
rows: [
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
],
};
const instance = new twe.Datatable(document.getElementById('datatable-1'), data2)
document.getElementById('datatable-search-input').addEventListener('input', (e) => {
instance.search(e.target.value);
});
Related resources
Tutorials:
navbar
icons
focus active and others
dark mode
spacing
utility first
buttons
rounded corners
sizing
inputs
forms
Extended Docs:
icons
navbar
offcanvas
scrollspy
buttons
datepicker
input group
inputs
select
textarea
timepicker
border opacity
borders
center grid items
dark theme
display flex
icons
position
spacing