Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Dropdown

Dropdown Actions Input Group for React

A file name input with a more-actions menu at its end.

Framework
UI library

Secondary actions for a field without crowding it: a ghost More button at the end opens a Dropdown Menu with Settings, Copy path and Open location, aligned to the button's end edge.

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

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.

All 39 input group examples