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

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

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

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

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

List Table