hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

Select

Select presents user with a set of options and allows to select one of them.

#

#

Select should be disabled, when user shouldn't be allowed to interact with it.

Individual options can be disabled too.

#

Mark select as loading, when options are fetched on the fly and are not yet available.

#

Invalid select indicates that current value isn't what the system expects.

#

Clearable select should be used when empty selection is acceptable.

#

Options can display an additional accessory view before the label. You can show an image using an image accessory. This is useful for showing logos when selecting sources or destinations, for example.

Icons can be accessories too.

#

You don't have to create objects with label and value keys as shown in the examples above. Select supports any objects, as long as you provide a label and value for each option via optionLabel and optionValue functions.

#

There's a version of Select called GroupedSelect, that supports groups of options.

#

#

  • When options are not coming from user-generated content.
  • When you expect to have not more than 10 options.

#

  • Use sentence case for tab titles.

#

#

NameDefaultDescription
isDisabled

—

boolean

Determines if select is disabled.

isLoading

—

boolean

Indicates that options are being loaded.

isInvalid

—

boolean

Indicates that select is in invalid state.

isClearablefalseboolean

Determines if selection can be cleared.

isOptionDisabled

—

(option: Option) => boolean

Function to determine whether an option should be disabled.

emptyOptionsMessage"No options"string

Text to show inside a dropdown when there are no options.

options

—

Option[]

Available options. `Option` is a generic, so type of options will be inferred.

optionLabel

—

(option: Option) => string

Function to extract label from an option. If it's not provided, `label` field will be used as a label.

optionValue

—

(option: Option) => OptionValue

Function to extract value from an option. If it's not provided, `value` field will be used as a value.

optionAccessory

—

(option: Option) => SelectOptionAccessoryType | undefined

Function to show an accessory view near the option label.

placeholder

—

string

Text to show inside select when no option is selected.

value

—

OptionValue | undefined

Selected option.

width"xs""3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "auto" | "100%"

Select width.

onChange

—

(value: OptionValue | undefined) => void

Callback for when user selects a different option or clears the selection.

#

NameDefaultDescription
isDisabled

—

boolean

Determines if select is disabled.

isLoading

—

boolean

Indicates that options are being loaded.

isInvalid

—

boolean

Indicates that select is in invalid state.

isClearablefalseboolean

Determines if selection can be cleared.

isOptionDisabled

—

(option: Option) => boolean

Function to determine whether an option should be disabled.

emptyOptionsMessage"No options"string

Text to show inside a dropdown when there are no options.

optionGroups

—

Array<{ label: string; options: Option[]; }>

Available options. `Option` is a generic, so type of options will be inferred.

optionLabel

—

(option: Option) => string

Function to extract label from an option. If it's not provided, `label` field will be used as a label.

optionValue

—

(option: Option) => OptionValue

Function to extract value from an option. If it's not provided, `value` field will be used as a value.

optionAccessory

—

(option: Option) => SelectOptionAccessoryType | undefined

Function to show an accessory view near the option label.

placeholder

—

string

Text to show inside select when no option is selected.

value

—

OptionValue | undefined

Selected option.

width"xs""3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "auto" | "100%"

Select width.

onChange

—

(value: OptionValue | undefined) => void

Callback for when user selects a different option or clears the selection.

On this page

  • Usage
  • Disabled
  • Loading
  • Invalid
  • Clearable
  • Accessories
  • Custom objects
  • Groups
  • Guidelines
  • When to use
  • Content
  • Props
  • Select
  • GroupedSelect