Components
Select
Allows users to pick one or more values from a range of predefined options.
Selectbox
MultiSelectbox
Import Selectboxes
Tremor exports four components to create two types selectboxes.
//SelectBox import { SelectBox, SelectBoxItem } from "@tremor/react"; //MultiSelectBox import { MultiSelectBox, MultiSelectBoxItem } from "@tremor/react";
Anatomy
How the basic component is pieced together displaying all properties with their default values.
import { SelectBox, SelectBoxItem } from "@tremor/react"; export default () => ( <SelectBox defaultValue={undefined} value={undefined} onValueChange={undefined} placeholder="Select..." icon={undefined} maxWidth="max-w-none" marginTop="mt-0" > <SelectBoxItem value={undefined} text="" icon={undefined} /> </SelectBox> );
import { MultiSelectBox, MultiSelectBoxItem } from "@tremor/react"; export default () => ( <MultiSelectBox defaultValue={undefined} value={undefined} onValueChange={undefined} placeholder="Select..." icon={undefined} maxWidth="max-w-none" marginTop="mt-0" > <MultiSelectBoxItem text="" value={undefined} /> </MultiSelectBox> );
Usage example
The example below shows a composition of a selectbox with icons.
import { SelectBox, SelectBoxItem } from "@tremor/react"; import { CalculatorIcon } from "@heroicons/react/outline"; export default () => ( <SelectBox handleSelect={(value) => console.log("the new value is", value)} defaultValue={1} > <SelectBoxItem value={1} text="Kilometers" icon={CalculatorIcon} /> <SelectBoxItem value={2} text="Meters" icon={CalculatorIcon} /> <SelectBoxItem value={3} text="Miles" icon={CalculatorIcon} /> <SelectBoxItem value={4} text="Nautical Miles" icon={CalculatorIcon} /> </SelectBox> );
Controlled state example
The example below shows a SelectBox with a controlled state.
import { useState } from "react"; import { SelectBox, SelectBoxItem } from "@tremor/react"; export default () => { const [value, setValue] = useState(null); return ( <SelectBox value={value} onValueChange={ setValue }> <SelectBoxItem value={5} text={'Five'} /> <SelectBoxItem value={3} text={'Three'} /> <SelectBoxItem value={1} text={'One'} /> </SelectBox> ); }
API Reference: SelectBox
- defaultValueoptional
- Description
- Sets the default value item in uncontrolled mode.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- valueoptional
- Description
- The controlled state of SelectBox. Must be used in conjunction with onValueChange.
- Type
- any
- Default
- -
- 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 box.
- Type
- string
- Default
- Select...
- Values
- iconoptional
- Description
- Set an optional icon within the input box.
- Type
- React.ElementType
- Default
- -
- Values
- maxWidthoptional
- marginTopoptional
API Reference: SelectBoxItem
- value
- Description
- The value of the component in controlled mode. Must be used in conjunction with onValueChange.
- 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 within the modal.
- Type
- React.ElementType
- Default
- -
- Values
API Reference: MultiSelectBox
- defaultValueoptional
- Description
- Sets the default value item in uncontrolled mode.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- valueoptional
- Description
- The value of the component in controlled mode. Must be used in conjunction with onValueChange.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- onValueChangeoptional
- Description
- Callback function for when the value of the component changes.
- Type
- (value: T) => void
- Default
- Values
- placeholderoptional
- Description
- Define the default text in the selectbox.
- Type
- string
- Default
- Select...
- Values
- iconoptional
- Description
- Set an optional icon within the input box.
- Type
- React.ElementType
- Default
- -
- Values
- maxWidthoptional
- marginTopoptional
API Reference: MultiSelectBoxItem
- value
- Description
- Used in the parent component to pre=select a certain dropdown item.
- Type
- any
- Default
- -
- Values
- E.g. { 1 }
- text
- Description
- Set a displayed text of the select item.
- Type
- string
- Default
- Values
ListTable