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
- marginTopoptional
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
DividerFooter