1. Components
  2. Dropdown

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";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
    <Dropdown
        value={undefined}
        defaultValue={undefined}
        onValueChange={undefined}
        placeholder="Select..."
        icon={undefined}
        maxWidth="max-w-none"
        marginTop="mt-0"
    >
        <DropdownItem
            value={undefined}
            text=""
            icon={undefined}
        />
    </Dropdown>
);

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 maxWidth="max-w-xs">
        <Text>Select render mode</Text>
        <Dropdown
            onValueChange={ (value: number) => console.log('The selected value is', value) }
            marginTop="mt-2"
            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

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
any
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
iconoptional
Description
Set an optional icon within the dropdown box.
Type
React.ElementType
Default
-
Values
maxWidthoptional
Description
Set the maximum width of the component.
Type
string
Default
-
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: DropdownItem

value
Description
Used in the parent component to select a certain dropdown item.
Type
any
Default
-
Values
E.g. { 1 }
text
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