Components

Select Box

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

Usage example

The example below shows a composition of a selectbox with icons.

import {
  SelectBox,
  SelectBoxItem,
  MultiSelectBox,
  MultiSelectBoxItem,
} from "@tremor/react";
import { CalculatorIcon } from "@heroicons/react/outline";

export default () => (
<div className="max-w-sm mx-auto space-y-6">
    <SelectBox
      onValueChange={(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>

    <MultiSelectBox>
      <MultiSelectBoxItem  value="1" text="Option 1" />
      <MultiSelectBoxItem  value="2" text="Option 2" />
      <MultiSelectBoxItem  value="3" text="Option 3" />
    </MultiSelectBox>
</div>
);

Controlled state example

The example below shows a SelectBox with a controlled state.

import { useState } from "react";
import {
  SelectBox,
  SelectBoxItem,
  MultiSelectBox,
  MultiSelectBoxItem,
} from "@tremor/react";

export function SelectBoxControlled() {
  const [value, setValue] = useState("");
  const [multiValue, setMultiValue] = useState([""]);
  return (
    <div className="max-w-sm mx-auto space-y-6">
      <SelectBox value={value} onValueChange={setValue}>
        <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>

      <MultiSelectBox value={multiValue} onValueChange={setMultiValue}>
        <MultiSelectBoxItem  value="1" text="Option 1" />
        <MultiSelectBoxItem  value="2" text="Option 2" />
        <MultiSelectBoxItem  value="3" text="Option 3" />
      </MultiSelectBox>
    </div>
  );
}

API Reference: SelectBox

client component

defaultValueoptional
Description: Sets the default value item in uncontrolled mode.
Type: string
Default
Values: E.g. '1'

valueoptional
Description: The controlled state of SelectBox. Must be used in conjunction with onValueChange.
Type: string
Default
Values: E.g. '1'

onValueChangeoptional
Description: Callback function for when the value of the component changes.
Type: (value: string) => void;
Default
Values

placeholderoptional
Description: Controls the default text in the box.
Type: string
Default: Select...
Values

disabledoptional
Description: Set the state of the element to disabled.
Type: boolean
Default: false
Values: true, false

iconoptional
Description: Set an optional icon within the input box.
Type: React.ElementType
Default
Values

API Reference: SelectBoxItem

client component

value
Description: The value of the component in controlled mode. Must be used in conjunction with onValueChange.
Type: string
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

client component

defaultValueoptional
Description: Sets the default value item in uncontrolled mode.
Type: string
Default
Values: E.g. '1'

valueoptional
Description: The value of the component in controlled mode. Must be used in conjunction with onValueChange.
Type: string
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

disabledoptional
Description: Set the state of the element to disabled.
Type: boolean
Default: false
Values: true, false

iconoptional
Description: Set an optional icon within the input box.
Type: React.ElementType
Default
Values

API Reference: MultiSelectBoxItem

client component

value
Description: Used in the parent component to pre=select a certain dropdown item.
Type: string
Default
Values: E.g. '1'

text
Description: Set a displayed text of the select item.
Type: string
Default
Values

List Table