UI
Select
Allows users to pick one or more values from a range of predefined options.
Select
SearchSelect
MultiSelect
import { MultiSelect, MultiSelectItem, SearchSelect, SearchSelectItem, Select, SelectItem,} from '@tremor/react';
export function SelectHero() { return ( <div className="mx-auto max-w-xs"> <div className="mb-4 text-center font-mono text-sm text-slate-500"> Select </div> <Select defaultValue="1"> <SelectItem value="1">Option One</SelectItem> <SelectItem value="2">Option Two</SelectItem> <SelectItem value="3">Option Three</SelectItem> </Select>
<div className="mb-4 mt-8 text-center font-mono text-sm text-slate-500"> SearchSelect </div> <SearchSelect> <SearchSelectItem value="1">Option 1</SearchSelectItem> <SearchSelectItem value="2">Option 2</SearchSelectItem> <SearchSelectItem value="3">Option 3</SearchSelectItem> </SearchSelect>
<div className="mb-4 mt-8 text-center font-mono text-sm text-slate-500"> MultiSelect </div> <MultiSelect> <MultiSelectItem value="1">Option 1</MultiSelectItem> <MultiSelectItem value="2">Option 2</MultiSelectItem> <MultiSelectItem value="3">Option 3</MultiSelectItem> </MultiSelect> </div> );}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.
import { RiCalculatorLine } from '@remixicon/react';import { Select, SelectItem } from '@tremor/react';import { useState } from 'react';
export function SelectUsageExample() { const [value, setValue] = useState(''); return ( <div className="mx-auto max-w-xs"> <label htmlFor="distance" className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Select distance</label> <Select id="distance" name="distance" value={value} onValueChange={setValue} className="mt-2"> <SelectItem value="1" icon={RiCalculatorLine}> Kilometers </SelectItem> <SelectItem value="2" icon={RiCalculatorLine}> Meters </SelectItem> <SelectItem value="3" icon={RiCalculatorLine}> Miles </SelectItem> <SelectItem value="4" icon={RiCalculatorLine}> Nautical Miles </SelectItem> </Select> </div> );}API Reference: Select
client component- defaultValue
- Sets the default value item in uncontrolled mode.
string
- value
- The controlled state of Select. Must be used in conjunction with onValueChange.
string
- onValueChange
- Callback function for when the value of the component changes.
(value: string) => void;
- placeholder
- Define the default text in the select.
string
Default: Select...
- disabled
- Set the state of the element to disabled.
boolean
Default: false
- icon
- Set an optional icon within the input.
React.ElementType
- error
- If true, the text input is labeled as invalid.
boolean
Default: false
- errorMessage
- Text to be displayed if the error prop is set to `true`.
string
- enableClear
- Enables the ability to clear a selection.
boolean
Default: true
API Reference: SelectItem
client component- value
- The value of the component in controlled mode. Must be used in conjunction with onValueChange.
Required
string
- icon
- Set an optional icon for an item within the modal.
React.ElementType
API Reference: SearchSelect
client component- defaultValue
- Sets the default value item in uncontrolled mode.
string
- value
- The controlled state of Select. Must be used in conjunction with onValueChange.
string
- onValueChange
- Callback function for when the value of the component changes.
(value: string) => void;
- searchValue
- Value of the search input.
Required
string
- onSearchValueChange
- Callback function for when the search value of the component changes.
Required
(value: string) => void;
- placeholder
- Define the default text in the select.
string
Default: Select...
- disabled
- Set the state of the element to disabled.
boolean
Default: false
- icon
- Set an optional icon within the input.
React.ElementType
- enableClear
- Enables the ability to clear a selection.
boolean
Default: true
API Reference: SearchSelectItem
client component- value
- The value of the component in controlled mode. Must be used in conjunction with onValueChange.
Required
string
- icon
- Set an optional icon for an item within the modal.
React.ElementType
API Reference: MultiSelect
client component- defaultValue
- Sets the default value item in uncontrolled mode.
string[]
- value
- The value of the component in controlled mode. Must be used in conjunction with onValueChange.
string[]
- onValueChange
- Callback function for when the value of the component changes.
(value: T) => void
- placeholder
- Define the default text in the select.
string
Default: Select...
- placeholderSearch
- Define the default text in the search bar.
string
Default: Search
- disabled
- Set the state of the element to disabled.
boolean
Default: false
- icon
- Set an optional icon within the input.
React.ElementType
API Reference: MultiSelectItem
client component- value
- Used in the parent component to pre=select a certain dropdown item.
Required
string
Theming
Select, Search Select, and MultiSelect
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Shadow boxShadowtremor-input | boxShadowtremor-input |
| Font size fontSizetremor-default | fontSizetremor-default |
| Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Border color focus colorstremor-brand-subtle | colorstremor-brand-subtle |
| Ring color focus colorstremor-brand-muted | colorstremor-brand-muted |
| Icon colorstremor-content-subtle | colorstremor-content-subtle |
| Chevron Down Icon; XCircle & Search Icon (MultiSelect) colorstremor-content-subtle | colorstremor-content-subtle |
| Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Background color disabled colorstremor-background-subtle | colorstremor-background-subtle |
| Background color hover colorstremor-background-muted | colorstremor-background-muted |
| Text color no selection colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color with selection colorstremor-content-emphasis | colorstremor-content-emphasis |
| Text color disabled colorstremor-content-muted | colorstremor-content-muted |
| Dropdown: Roundness borderRadiustremor-default | borderRadiustremor-default |
| Dropdown: Shadow boxShadowtremor-dropdown | boxShadowtremor-dropdown |
| Dropdown: Background color colortremor-background | colortremor-background |
| Dropdown: Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Dropdown: Text color Search (MultiSelect) colorstremor-content-emphasis | colorstremor-content-emphasis |
SelectItem, Search SelectItem, and MultiSelectItem
| Element | Theme Token |
|---|---|
| Font size fontSizetremor-default | fontSizetremor-default |
| Text color colorstremor-content-emphasis | colorstremor-content-emphasis |
| Background color hover colorstremor-background-muted | colorstremor-background-muted |
| Text color hover colorstremor-content-strong | colorstremor-content-strong |
| Background color selected colorstremor-background-muted | colorstremor-background-muted |
| Text color selected colorstremor-content-strong | colorstremor-content-strong |
| Checkbox (MultiSelectItem) colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
| Icon (SelectItem, SearchSelectItem) colorstremor-content-subtle | colorstremor-content-subtle |