ComboBox
A combo box allows the user to make a selection from a list of suggested, likely or desired values.
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 ComboBox uses the following components.
Usage
Disabled
A combo box 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 combo box with a disabled item.
Error
A combo box can be displayed in an error state to indicate that the selection is invalid.
Sizes
A combo box has multiple sizes to choose from. The combo box option also changes size based on the size of the combo box.
Labeling
If a visible label isn't specified, an aria-label must be provided to the combo box 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 combo box can take the width of its container.
Controlled
A combo box can have a controlled selected value. In this example, it shows how it is possible to deselect an option.
Custom Filtering
A combo box can overridde the default useFilter function from RAC. This can be overridden using the defaultFilter prop, or by using the items prop to control the filtered list. When items is provided rather than defaultItems, combo box does no filtering of its own.
Allow Empty Collection
A combo box can be rendered with an empty collection.
Allow Custom Value
A combo box can allow the user to enter a custom value that does not match the list.
Form
A combo box can be part of a form. To submit the value of a combo box, make sure you specify the name property.
Auto Menu Width
A combo box can have a menu that automatically adjusts its width based on the longest item.
Menu placement
A combo box's menu can have a customized menu placement using the direction and align props.
Section
A combo box can have sections and section headers.
Footer
A combo box can have a footer.
Avatar
A combo box item can contain an avatar.
Count
A combo box item 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 combo box item can contain icons.
End Icons
A combo box can contain icons at the end of an option.
Loading
A combo box can have a loading state.
Load on scroll
A combo box can load more items when scrolling within.
Selection indicator
A combo box can have a different selection indicator.
Description
A combo box item can have a description.
Props
- isLoading?
- size?
- isInvalid?
- selectionIndicator?
- radioProps?
- checkboxProps?
- style?
- id?
- value?
- textValue?
- aria-label?
- isDisabled?
- onAction?
- children?
- className?
- href?
- hrefLang?
- target?
- rel?
- download?
- ping?
- referrerPolicy?
- routerOptions?
Whether the item is loading.
A ListBoxItem can vary in size.
Whether or not the ListBoxItem is in an invalid state.
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.
The props for the Radio.
The props for the Checkbox.
The inline style for the element. A function may be provided to compute the style based on component state.
The unique id of the item.
The object value that this item represents. When using dynamic collections, this is set automatically.
A string representation of the item's contents, used for features like typeahead.
An accessibility label for this item.
Whether the item is disabled.
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.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
A URL to link to. See MDN.
Hints at the human language of the linked URL. SeeMDN.
The target window for the link. See MDN.
The relationship between the linked resource and the current page. See MDN.
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
A space-separated list of URLs to ping when the link is followed. See MDN.
How much of the referrer to send when following the link. See MDN.
Options for the configured client side router.
- onHoverStart?
- onHoverEnd?
- onHoverChange?
Handler that is called when a hover interaction starts.
Handler that is called when a hover interaction ends.
Handler that is called when the hover state changes.