Components

Dropdown

Displays a list of options for the user to pick from.

Import Dropdown

Tremor exports two components to create a Dropdown.

import { Dropdown, DropdownItem } from "@tremor/react";

Usage example

The example below shows a composition of a simple Dropdown combining a Dropdown with several DropdownItem components.

Select render mode

import { Dropdown, DropdownItem, Card, Text } from "@tremor/react";
import { CubeIcon, CubeTransparentIcon } from "@heroicons/react/solid";

export default () => (
  <Card className="max-w-xs">
    <Text>Select render mode</Text>
    <Dropdown
      className="mt-2"
      onValueChange={(value) => console.log("The selected value is", value)}
      placeholder="Render mode"
    >
      <DropdownItem value="1" text="Transparent" icon={CubeTransparentIcon} />
      <DropdownItem value="2" text="Outline" icon={CubeIcon} />
    </Dropdown>
  </Card>
);

Controlled state example

The example below shows a Dropdown with a controlled state.

import { useState } from "react";
import { Dropdown, DropdownItem } from "@tremor/react";

export default () => {
  const [value, setValue] = useState(null);

  return (
    <Dropdown value={value} onValueChange={setValue}>
      <DropdownItem value="5" text={"Five"} />
      <DropdownItem value="3" text={"Three"} />
      <DropdownItem value="1" text={"One"} />
    </Dropdown>
  );
};

API Reference: Dropdown

client component

valueoptional
Description: The value of the component in controlled mode. Must be used in conjunction with onValueChange.
Type: string
Default: null
Values

defaultValueoptional
Description: Sets the default value item in uncontrolled mode.
Type: string
Default: null
Values: E.g. '1'

onValueChangeoptional
Description: Callback function for when the value of the component changes.
Type: (value: T) => void
Default
Values

placeholderoptional
Description: Controls the default text in the dropdown.
Type: string
Default: Select
Values

disabledoptional
Description: Set the state of the element to disabled.
Type: boolean
Default: false
Values: true, false

iconoptional
Description: Set an optional icon within the dropdown box.
Type: React.ElementType
Default
Values

API Reference: DropdownItem

client component

value
Description: Used in the parent component to select a certain dropdown item.
Type: string
Default
Values: E.g. '1'

textoptional
Description: Set a displayed text of the dropdown item.
Type: string
Default
Values

iconoptional
Description: Set an optional icon for an item.
Type: React.ElementType
Default
Values

Divider Icons