Select

A select displays a collapsible list of options from which the user can select one.

View sourceView on npmReport an issue

Anatomy

Header

The Header component represents a header within a Hopper container.

Section

The Section component represents a section within a Hopper container.

Composed Components

A Select uses the following components.

Avatar

An avatar is used to represent a user, team or another entity.

Badge

A badge is used to bring attention to an element.

Header

A placeholder for an header section.

Icon

An icon component allow you to render a custom icon.

Section

A Section serves as a versatile container component, encapsulating an HTML section element.

Text

A text component is a primitive component matching Hopper's typography type scale.

Usage

Disabled

A select in a disabled state shows that it exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

Disabled Item

A select with a disabled item.

Error

A select can be displayed in an error state to indicate that the selection is invalid.

Sizes

A select has multiple sizes to choose from. The select menu also changes size based on the size of the select.

Labeling

If a visible label isn't specified, an aria-label must be provided to the select for accessibility. If the field is labeled by a separate element, an aria-labelledby prop must be provided using the ID of the labeling element instead.

Icon Prefix

An icon can be displayed at the start of the select trigger.

Text Prefix

A short text can be displayed at the start of the select trigger.

Fluid

A select can take the width of its container.

Custom Value

A select's trigger value can be customized using the renderValue function to allow other elements such as an avatar or icon inside the trigger value.

Controlled

A select can have a controlled selected value. In this example, it shows how it is possible to deselect an option.

Form

A select can be part of a form. To submit the value of a select, make sure you specify the name property.

Auto Menu Width

A select can have a menu that automatically adjusts its width based on the longest item.

Menu placement

A select's menu can have a customized menu placement using the direction and align props.

Section

A select can have sections and section headers.

Footer

A select can have a footer.

Avatar

A select option can contain an avatar.

Count

A select option can contain a count using a badge.

Dynamic Lists

Options and sections can be populated from a hierarchial data structure. If a section has a header, the Collection component can be used to render the child items.

Icons

A select option can contain icons.

End Icons

A select can contain icons at the end of an option.

Loading

A select can have a loading state.

Load on scroll

A select can load more items when scrolling within.

Selection indicator

A select can have a different selection indicator.

Description

A select item can have a description.

Props

isLoading?

Whether the item is loading.

size?

A ListBoxItem can vary in size.

Defaults to sm.
isInvalid?

Whether or not the ListBoxItem is in an invalid state.

selectionIndicator?

The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode.

Defaults to check.
radioProps?

The props for the Radio.

checkboxProps?

The props for the Checkbox.

style?

The inline style for the element. A function may be provided to compute the style based on component state.

id?

The unique id of the item.

value?

The object value that this item represents. When using dynamic collections, this is set automatically.

textValue?

A string representation of the item's contents, used for features like typeahead.

aria-label?

An accessibility label for this item.

isDisabled?

Whether the item is disabled.

onAction?

Handler that is called when a user performs an action on the item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.

children?

The children of the component. A function may be provided to alter the children based on component state.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

href?

A URL to link to. See MDN.

hrefLang?

Hints at the human language of the linked URL. SeeMDN.

target?

The target window for the link. See MDN.

rel?

The relationship between the linked resource and the current page. See MDN.

download?

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.

ping?

A space-separated list of URLs to ping when the link is followed. See MDN.

referrerPolicy?

How much of the referrer to send when following the link. See MDN.

routerOptions?

Options for the configured client side router.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • Item has been renamed to SelectItem.
  • The selected value only includes text. If an icon or avatar is needed, customize it using the renderValue function.
  • There is no allowFlip. Use shouldFlip.
  • There is no allowPreventOverflow. This is done automatically.
  • There is no allowResponsiveMenuWidth. Use isAutoMenuWidth.
  • disabled has been renamed to isDisabled.
  • fluid has been renamed to isFluid.
  • open has been renamed to isOpen..
  • required has been renamed to isRequired.
  • A select cannot be read-only.
  • overlayProps has been removed. Use popoverProps instead.
  • Use isInvalid instead of validationState.
  • variant has been removed.
  • zIndex has been removed.
  • Custom tooltips are not supported.