Search Input
An input component that allows users to search for content.
Installation
npx shadcn@latest add @tetra-ui/search-inputUsage
import { SearchInput } from "@/components/ui/search-input";<SearchInput placeholder="Search..." />A search icon is rendered automatically on the leading edge.
With addon
Add trailing content such as a clear button:
import { InputAddon, InputAddonButton, InputAddonButtonIcon } from "@/components/ui/input";
import { XIcon } from "@/components/ui/icons";
<SearchInput placeholder="Search..." value={query} onChangeText={setQuery}>
<InputAddon align="inline-end">
<InputAddonButton size="icon" variant="ghost" onPress={() => setQuery("")}>
<InputAddonButtonIcon>
<XIcon />
</InputAddonButtonIcon>
</InputAddonButton>
</InputAddon>
</SearchInput>Disabled
<SearchInput disabled placeholder="Search..." />