shadcn.io is an independent project built on shadcn/ui
A search input with a Search button at the end. The button shows a magnifying glass and the word Search. Nothing in the demo runs a query.
Use it when search should wait for a press, not for each keystroke. Suggestions as someone types belong in a Combobox. In React, Base UI does not submit the search.
Installation
Anatomy
Usage
<InputGroup className="w-full max-w-sm bg-background">
<InputGroupInput
aria-label="Search"
placeholder="Search..."
type="search"
/>
<InputGroupAddon align="inline-end" className="pe-2">
<InputGroupButton size="sm" variant="secondary">
Search
<SearchIcon aria-hidden="true" data-icon="inline-end" />
</InputGroupButton>
</InputGroupAddon>
</InputGroup>FAQ
How is the Search button built?
An InputGroupButton with size="sm" and variant="secondary", its text followed by a magnifying glass marked data-icon="inline-end".
Why does the addon have pe-2?
It adds a little padding after the button so it doesn't touch the group's rounded end.
How do I run the search?
Wrap the group in a form and give the button type="submit", so Enter in the input and a click on the button both submit. InputGroupButton defaults to type="button".
Why type=search on the input?
It tells the browser and assistive tech this is a search field, and mobile keyboards show a search key. The input also has aria-label="Search" because there's no visible label.
API Reference
Input Group
Sets aria-label="Search", placeholder="Search...", type="search", align="inline-end", size="sm" and variant="secondary". The rest is on the Input Group page.
