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: -
Values

marginTopoptional
Description: Controls the top margin.
Type: string
Default: mt-0
Values

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

Divider Footer