Tabler React 2 Docs

Dropdowns

Dropdowns are used to select an option from a list of options.

Note: The Dropdown component does not provide a return or onChange handler. To use the Dropdown component as a form element, use the DropdownInput component.

Signature

import { Dropdown } from "tabler-react-2";

<Dropdown {...props}>{children}</Dropdown>;

Props

Prop	Required	Type	Description
`prompt`	No	String	The text to display in the dropdown.
`items`	No	`ItemList`	A list of items to display in the dropdown.
`toggleStyle`	No	Object	An object with `width` and `height` properties.
`hideToggleIcon`	No	Boolean	Whether to hide the toggle icon.
`dropdownClassName`	No	String	The class name of the dropdown.

Basic Usage

The Dropdown component is used to select an option from a list of options.

<Dropdown
  prompt="Select a value"
  items={[
    { type: "item", href: "#", text: "Link 1" },
    { type: "item", onclick: () => alert("Clicked"), text: "Button 2", disabled: true },
    { type: "divider" },
    { type: "header", text: "Header" },
    { type: "item", href: "#", text: "Link 3", active: true },
    { type: "item", onclick: () => alert("Clicked"), text: "Button 4" },
    { type: "item", text: <kbd>Button 5</kbd> },
  ]}
/>

Interactive Content Items

You can render interactive content like an input inside a dropdown item by passing JSX in text with no href/onclick.

<Dropdown
  prompt="Quick actions"
  items={[
    {
      type: "item",
      id: "filter-input",
      text: (
        <input
          className="form-control"
          placeholder="Type to filter..."
          onClick={(e) => e.stopPropagation()}
        />
      ),
    },
    { type: "divider", id: "div-1" },
    { type: "item", id: "open-settings", onclick: () => alert("Settings"), text: "Settings" },
  ]}
/>

Use id (or key) on items to keep identity stable when your items array changes.

ItemList

The items prop of the Dropdown component accepts an array of objects. It accepts 2 types of entries: an item and a divider.

Item

An item object has the following properties:

Prop	Required	Type	Description
`type`	Yes	[`item`, `divider`]	The type of the item. Must be `item` or `divider`.
`text`	Yes	String \| node	The text to display in the item.
`href`	No	String	The URL of the item.
`onclick`	No	Function	The function to call when the item is clicked.
`id`	No	String \| Number	Optional stable identity for the item. Recommended when rendering dynamic lists or interactive content.
`key`	No	String \| Number	Optional React key override for item identity.
`disabled`	No	Boolean	Whether the item is disabled. Prevents mouse interaction.
`active`	No	Boolean	Whether the item is active. Will not set the prompt value of the dropdown, but will show as highlighted.

type ItemList = Array<{
  type: "item";
  text: string | React.ReactNode;
  href?: string;
  onclick?: () => void;
  id?: string | number;
  key?: string | number;
  disabled?: boolean;
  active?: boolean;
}

Note: If neither href nor onclick is provided, string/number text renders as a basic dropdown item and JSX text renders as static item content (useful for embedded inputs or custom controls).

Divider

A divider object seperates items in the dropdown. It has the following properties:

Prop	Required	Type	Default	Description
`type`	Yes	[`item`, `divider`]		The type of the item. Must be `item` or `divider`.

type ItemList = Array<{
  type: "divider";
}

Edit this page on GitHub

Tabler React 2 Docs

Dropdowns

Dropdowns

Signature

Props

Basic Usage

Interactive Content Items

ItemList

Item

Divider

Inputs

Dropdown Input

On this page