Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Search Filters Input Group for React

A product search with a Category menu at the end: All Products, Electronics, and Clothing.

A product search field with a Category button at the end. The menu offers All Products, Electronics, and Clothing. Choosing one does not change the Category label, and it does not filter a list.

Use it to keep a coarse filter attached to the search box. If the button should show the current choice, render it from a Select. In React, Base UI does not remember the category.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup className="w-full max-w-sm bg-background [--radius:1rem]">
  <InputGroupInput
    aria-label="Search products"
    placeholder="Search products"
    type="search"
  />
  <InputGroupAddon align="inline-end">
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <InputGroupButton className="pe-1.5! text-xs" variant="ghost" />
        }
      >
        Category
        <ChevronDownIcon aria-hidden="true" className="size-3" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="[--radius:0.95rem]">
        <DropdownMenuGroup>
          <DropdownMenuItem>All Products</DropdownMenuItem>
          <DropdownMenuItem>Electronics</DropdownMenuItem>
          <DropdownMenuItem>Clothing</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the Category button built?

An InputGroupButton with text-xs and a small chevron after the label. DropdownMenuTrigger renders the InputGroupButton through render.

Why does the trigger have pe-1.5!?

It trims the end padding so the chevron sits close to the group's rounded edge. The ! makes it win over the button's own padding.

What do the --radius classes do?

[--radius:1rem] on InputGroup and [--radius:0.95rem] on the menu change the radius token for each part, so the field and its menu round alike. The menu's class goes on DropdownMenuContent.

Where does the menu open?

Under the button, aligned to its end. align="end" on DropdownMenuContent place it.

Does the label change to the chosen category?

No. Keep the category in state, show it in the trigger and mark the current one in the menu.

API Reference

Input Group

Sets aria-label="Search products", placeholder="Search products", type="search", align="inline-end" and variant="ghost". The rest is on the Input Group page.

Dropdown Menu

Sets align="end". The rest is on the Dropdown Menu page.

All 39 input group examples