1. Components
  2. Select

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
Description
Set the maximum width of the component.
Type
string
Default
-
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

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
Description
Set the maximum width of the component.
Type
string
Default
-
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

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