Skip to content

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

Free

Dropdown Actions Input Group for React

A file name field with a ghost More button whose menu lists Settings, Copy path, and Open location.

A file name field with a ghost More button at the end. The menu lists Settings, Copy path, and Open location, lined up with the button's end. The items do not change the file name.

Use it when a field has extra actions that should not each be a button. If one of them cannot be undone, confirm it in an Alert Dialog. In React, Base UI does not run the menu items.

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">
  <InputGroupInput
    aria-label="File name"
    placeholder="Enter file name"
    type="text"
  />
  <InputGroupAddon align="inline-end">
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <InputGroupButton
            aria-label="More"
            size="icon-xs"
            variant="ghost"
          />
        }
      >
        <MoreHorizontalIcon aria-hidden="true" />
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuGroup>
          <DropdownMenuItem>Settings</DropdownMenuItem>
          <DropdownMenuItem>Copy path</DropdownMenuItem>
          <DropdownMenuItem>Open location</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the More button wired to the menu?

The trigger is an icon-only InputGroupButton named More. DropdownMenuTrigger renders the InputGroupButton through render.

Why does the menu line up with the end of the field?

align="end" on DropdownMenuContent place it.That keeps the menu under the button instead of spilling past the field.

Do the items do anything?

Not in the demo. Run each action from its item's select handler.

Where does the addon go?

After the input, with align="inline-end", so the button sits at the end and the input keeps the space before it.

How is the input labeled?

aria-label="File name", since there's no visible label.

Can the menu be used from the keyboard?

Yes. Enter, Space or Arrow Down on the button opens it, arrows move between items, Enter picks one and Escape closes it, returning focus to the button.

API Reference

Input Group

Sets aria-label="File name", placeholder="Enter file name", type="text", align="inline-end", aria-label="More" and size="icon-xs". 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