UI

Select

Allows users to pick one or more values from a range of predefined options.

Select
SearchSelect
MultiSelect

Import Select, SelectSearch, MultiSelect

Tremor exports six components to create three types of selects.

//Selectimport { Select, SelectItem } from '@tremor/react';
//SearchSelectimport { SearchSelect, SearchSelectItem } from '@tremor/react';
//MultiSelectimport { MultiSelect, MultiSelectItem } from '@tremor/react';

Usage example

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

API Reference: Select

client component
defaultValue
string
Sets the default value item in uncontrolled mode.
value
string
The controlled state of Select. Must be used in conjunction with onValueChange.
onValueChange
(value: string) => void;
Callback function for when the value of the component changes.
placeholder
string

Default: Select...

Define the default text in the select.
disabled
boolean

Default: false

Set the state of the element to disabled.
icon
React.ElementType
Set an optional icon within the input.
error
boolean

Default: false

If true, the text input is labeled as invalid.
errorMessage
string
Text to be displayed if the error prop is set to `true`.
enableClear
boolean

Default: true

Enables the ability to clear a selection.

API Reference: SelectItem

client component
value
Required
string
The value of the component in controlled mode. Must be used in conjunction with onValueChange.
icon
React.ElementType
Set an optional icon for an item within the modal.

API Reference: SearchSelect

client component
defaultValue
string
Sets the default value item in uncontrolled mode.
value
string
The controlled state of Select. Must be used in conjunction with onValueChange.
onValueChange
(value: string) => void;
Callback function for when the value of the component changes.
searchValue
Required
string
Value of the search input.
onSearchValueChange
Required
(value: string) => void;
Callback function for when the search value of the component changes.
placeholder
string

Default: Select...

Define the default text in the select.
disabled
boolean

Default: false

Set the state of the element to disabled.
icon
React.ElementType
Set an optional icon within the input.
enableClear
boolean

Default: true

Enables the ability to clear a selection.

API Reference: SearchSelectItem

client component
value
Required
string
The value of the component in controlled mode. Must be used in conjunction with onValueChange.
icon
React.ElementType
Set an optional icon for an item within the modal.

API Reference: MultiSelect

client component
defaultValue
string[]
Sets the default value item in uncontrolled mode.
value
string[]
The value of the component in controlled mode. Must be used in conjunction with onValueChange.
onValueChange
(value: T) => void
Callback function for when the value of the component changes.
placeholder
string

Default: Select...

Define the default text in the select.
placeholderSearch
string

Default: Search

Define the default text in the search bar.
disabled
boolean

Default: false

Set the state of the element to disabled.
icon
React.ElementType
Set an optional icon within the input.

API Reference: MultiSelectItem

client component
value
Required
string
Used in the parent component to pre=select a certain dropdown item.

Theming

Select, Search Select, and MultiSelect

Roundness
borderRadiustremor-default
Shadow
boxShadowtremor-input
Font size
fontSizetremor-default
Border color
colorstremor-border-DEFAULT
Border color focus
colorstremor-brand-subtle
Ring color focus
colorstremor-brand-muted
Icon
colorstremor-content-subtle
Chevron Down Icon; XCircle & Search Icon (MultiSelect)
colorstremor-content-subtle
Background color
colorstremor-background-DEFAULT
Background color disabled
colorstremor-background-subtle
Background color hover
colorstremor-background-muted
Text color no selection
colorstremor-content-DEFAULT
Text color with selection
colorstremor-content-emphasis
Text color disabled
colorstremor-content-muted
Dropdown: Roundness
borderRadiustremor-default
Dropdown: Shadow
boxShadowtremor-dropdown
Dropdown: Background color
colortremor-background
Dropdown: Border color
colorstremor-border-DEFAULT
Dropdown: Text color Search (MultiSelect)
colorstremor-content-emphasis

SelectItem, Search SelectItem, and MultiSelectItem

Font size
fontSizetremor-default
Text color
colorstremor-content-emphasis
Background color hover
colorstremor-background-muted
Text color hover
colorstremor-content-strong
Background color selected
colorstremor-background-muted
Text color selected
colorstremor-content-strong
Checkbox (MultiSelectItem)
colorstremor-brand-DEFAULT
Icon (SelectItem, SearchSelectItem)
colorstremor-content-subtle