Skip to content

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

Free

With Footer Actions Combobox for React

A workspace combobox that starts on Personal Workspace, with Manage Workspaces under the list.

Personal Workspace starts selected. Under the list, a separator and a Manage Workspaces button with a settings icon close the popup. That button is for managing, not for switching.

Use it for a switcher that also needs a way to add or manage what it lists. A list with no extra action is a plain Combobox. In React, Base UI does not add the footer button.

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

Combobox anatomy: control, input, trigger, content, item, item indicator

Usage

<Combobox
  defaultValue={workspaces[0]}
  items={workspaces}
  onOpenChange={setOpen}
  open={open}
>
  <ComboboxTrigger
    render={
      <Button className="w-[250px] justify-between" variant="outline" />
    }
  >
    <ComboboxValue placeholder="Select workspace..." />
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search workspaces..." showTrigger={false} />
    <ComboboxEmpty>No workspace found.</ComboboxEmpty>
    <ComboboxList>
      {(workspace: Workspace) => (
        <ComboboxItem key={workspace.value} value={workspace}>
          {workspace.label}
        </ComboboxItem>
      )}
    </ComboboxList>
    <ComboboxSeparator />
    <div className="p-1">
      <Button
        className="w-full justify-start text-xs"
        onClick={handleManage}
        variant="ghost"
      >
        <SettingsIcon aria-hidden="true" data-icon="inline-start" />
{/* The rest of the file is under Installation. */}

FAQ

API Reference

Combobox

Sets defaultValue={workspaces[0]}, items={workspaces}, onOpenChange={setOpen}, open={open}, placeholder="Select workspace..." and placeholder="Search workspaces...". The rest is on the Combobox page.

Button

Sets variant="outline", onClick={handleManage} and variant="ghost". The rest is on the Button page.

All 42 combobox examples