shadcn.io is not affiliated with official shadcn/ui
A magnifier is the universal sign for search. This example puts a SearchIcon in an InputGroupAddon beside an input with type search and the placeholder Search..., under a visible Search label. Use it for site search, list filters and table search.
Preview
Installation
FAQ
What does type search give this field?
Browsers treat it as a search box: many show a clear button while there's text, Escape clears it, and phones show a search key on the keyboard.
How is the icon placed inside the field?
The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds SearchIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.
Is the icon read by screen readers?
No. SearchIcon has aria-hidden, because the Search label already names the field. The icon is a visual hint only.
How is Search tied to the field?
Clicking the label focuses the field, and screen readers announce it with the field.
FieldLabel sets htmlFor to search-query, the input's id.
Related
- Email InputAn email field with a mail icon inside it
- Input with LabelA text input with a label above it
- Search Filter FormA product search form with a query, a
- Simple Command MenuAn inline command menu with a search
- Simple Single Select ComboboxA single-select combobox that opens from
- Date InputA date field with a calendar icon, using