shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Icons
Search with Icon Input Group for React
A search input with a magnifying glass at its start.
Framework
UI library
The everyday search field: a magnifying glass before the input, in a default inline-start addon written after it. Clicking the icon focuses the field.
Preview
Installation
Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
FAQ
How does the icon sit before the input?
The InputGroupAddon keeps the default align, inline-start. It's written after the input, and align puts it first visually.
Does clicking the icon focus the field?
A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.
Why type=search?
It marks the field as search for assistive tech and gives mobile keyboards a search key.
Related
- Contact Fields with Icons Input GroupEmail and phone inputs, each with an icon
- Dual Icons Input GroupA card number and a password input, each
- Search InputA search field with a magnifier icon
- Search Filters Input GroupA product search with a Category menu at
- Input with LabelA text input with a label above it
- Simple Single Select ComboboxA single-select combobox that opens from