shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Buttons
Search Button Input Group for React
A search input with a labeled Search button at its end.
A search field with an explicit button, for searches that run on submit rather than as people type. The secondary InputGroupButton with a magnifying glass sits in an inline-end addon after the input, with a little end padding.
Preview
Installation
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.
Related
- Copy Button Input GroupA read-only link with a copy button that
- Multiple Action Buttons Input GroupA read-only link with an info button and
- Password Actions Input GroupA password input with a show/hide button
- Search with Icon Input GroupA search input with a magnifying glass at
- Two Field FormA two-field contact form for a name and
- Input with LabelA text input with a label above it