Comboboxes

{ loadingMenuItems: Loading, optionSelectedInMenu: Current Selection:, removeSingleSelectedOption: Remove selected option, removePill: , Press delete or backspace to remove, selectedListboxLabel: Selected Options:, }

Assistive text for accessibility This object is merged with the default props object on every render.

• label: This is used as a visually hidden label if, no labels.label is provided.
• loading: Text added to loading spinner.
• optionSelectedInMenu: Added before selected menu items in Read-only variants (Picklists). The default is Current Selection:.
• popoverLabel: Used by popover variant, assistive text for the Popover aria-label.
• removeSingleSelectedOption: Used by inline-listbox, single-select variant to remove the selected item (pill). This is a button with focus. The default is Remove selected option.
• removePill: Used by multiple selection Comboboxes to remove a selected item (pill). Focus is on the pill. This is not a button. The default is , Press delete or backspace to remove.
• selectedListboxLabel: This is a label for the selected listbox. The grouping of pills for multiple selection Comboboxes. The default is Selected Options:. Tested with snapshot testing.

The aria-describedby attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need. Tested with snapshot testing.

CSS classes to be added to tag with .slds-combobox. Uses classNames API. Tested with snapshot testing.

CSS classes to be added to top level tag with .slds-form-element and not on .slds-combobox_container. Uses classNames API. Tested with snapshot testing.

CSS classes to be added to tag with .slds-dropdown. Uses classNames API. Autocomplete/bass variant menu height should not scroll and should be determined by number items which should be no more than 10. Tested with snapshot testing.

CSS classes to be added to tag with .slds-dropdown__header. Uses classNames API.

{}

Event Callbacks

• onBlur: Called when input removes focus.
• onChange: Called when keyboard events occur within input
• onClose: Triggered when the menu has closed.
• onFocus: Called when input receives focus.
• onOpen: Triggered when the menu has opened.
• onRequestClose: Function called when the menu would like to hide. Please use with isOpen.
• onRequestOpen: Function called when the menu would like to show. Please use with isOpen.
• onRequestRemoveSelectedOption: Function called when a single selection option is to be removed.
• onSelect: Function called when a menu item is selected. This includes header and footer items.
• onSubmit: Function called when user presses enter or submits the input Tested with Mocha testing.

Message to display when the input is in an error state. When this is present, also visually highlights the component as in error. Tested with snapshot testing.

A Tooltip component that is displayed next to the labels.label. The props from the component will be merged and override any default props.

If true, { label: 'None': value: '' } will be selected.

If true, loading spinner appears inside input on right hand side.

Add loading spinner below the options

By default, dialogs will flip their alignment (such as bottom to top) if they extend beyond a boundary element such as a scrolling parent or a window/viewpoint. hasStaticAlignment disables this behavior and allows this component to extend beyond boundary elements. Not tested.

HTML id for component. Tested with snapshot testing.

An Input component. The props from this component will override any default props.

{ deselectOption: None, cancelButton: Cancel, doneButton: Done, noOptionsFound: No matches found., optionDisabledTooltipLabel: This option is disabled., placeholderReadOnly: Select an Option, removePillTitle: Remove, }

Text labels for internationalization This object is merged with the default props object on every render.

• deselectOption: This label appears first in the menu items of a read-only, Picklist-like Combobox. Selecting it, deselects any currently selected value.
• label: This label appears above the input.
• cancelButton: This label is only used by the dialog variant for the cancel button in the footer of the dialog. The default is Cancel
• doneButton: This label is only used by the dialog variant for the done button in the footer of the dialog. The default is Done
• multipleOptionsSelected: This label is used by the readonly variant when multiple options are selected. The default is undefined options selected. This will override the entire string.
• noOptionsFound: Custom message that renders when no matches found. The default empty state is just text that says, 'No matches found.'.
• placeholder: Input placeholder
• placeholderReadOnly: Placeholder for Picklist-like Combobox
• removePillTitle: Title on X icon Tested with snapshot testing.

Forces the dropdown to be open or closed. See controlled/uncontrolled callback/prop pattern for more on suggested use view Concepts and Best Practices Tested with snapshot testing.

target

Sets the dialog width to the width of one of the following:

• target: Sets the dialog width to the width of the target. (Menus attached to input typically follow this UX pattern),
• menu: Consider setting a menuMaxWidth if using this value. If not, width will be set to width of largest menu item.
• none: Does not set a width on the dialog. Tested with snapshot testing.

Accepts a custom menu item rendering function that becomes a custom component. It should return a React node. The checkmark is still rendered in readonly variants. This function is passed the following props:

• assistiveText: Object, assistiveText prop that is passed into Combobox
• option: Object, option data for item being rendered that is passed into Combobox
• selected: Boolean, allows rendering of assistiveText.optionSelectedInMenu in Readonly Combobox

Tested with snapshot testing.

This callback exposes the input reference / DOM node to parent components.

absolute

Please select one of the following:

• absolute - (default) The dialog will use position: absolute and style attributes to position itself. This allows inverted placement or flipping of the dialog.
• overflowBoundaryElement - The dialog will overflow scrolling parents. Use on elements that are aligned to the left or right of their target and don't care about the target being within a scrolling parent. Typically this is a popover or tooltip. Dropdown menus can usually open up and down if no room exists. In order to achieve this a portal element will be created and attached to body. This element will render into that detached render tree.
• relative - No styling or portals will be used. Menus will be positioned relative to their triggers. This is a great choice for HTML snapshot testing.

Sets a maximum width that the menu will be used if inheritWidthOf is set to menu. (Example: 500px) Tested with snapshot testing.

Allows multiple selections Tested with mocha testing.

Array of item objects in the dropdown menu. Each object can contain:

• icon: An Icon component. (not used in read-only variant)
• id: A unique identifier string.
• label: A primary string of text for a menu item or group separator.
• subTitle: A secondary string of text added for clarity. (optional)
• title: A string of text shown as the title of the selected item (optional)
• type: 'separator' is the only type currently used
• disabled: Set to true to disable this menu item.
• tooltipContent: Content that is displayed in tooltip when item is disabled

  {
    id: '2',
    label: 'Salesforce.com, Inc.',
    subTitle: 'Account • San Francisco',
    title: 'Salesforce',
    type: 'account',
  disabled: true,
  tooltipContent: "You don't have permission to select this item."
  },
  

  Note: At the moment, Combobox does not support two consecutive separators. Tested with snapshot testing.

Determines the height of the menu based on SLDS CSS classes. This is a number. The default for a readonly variant is 5.

Limits auto-complete input submission to one of the provided options. Tested with mocha testing.

A Popover component. The props from this popover will be merged and override any default props. This also allows a Combobox's Popover dialog to be a controlled component. Tested with snapshot testing.

false

Applies label styling for a required form element. Tested with snapshot testing.

[]

Accepts an array of item objects. For single selection, pass in an array of one object. For item object keys, see options prop. Tested with snapshot testing.

This callback exposes the selected listbox reference / DOM node to parent components.

false

Disables the input and prevents editing the contents. This only applies for single readonly and inline-listbox variants.

Accepts a tooltip that is displayed when hovering on disabled menu items.

Value of input. This is a controlled component, so you will need to control the input value by passing the value from onChange to a parent component or state manager, and then pass it back into the componet with this prop. Please see examples for more clarification. Tested with snapshot testing.

Default value of input. Provide uncontroled behaviour

[]

Array of item objects in the dropdown menu that is displayed below the list of options. onSelect fires when selected. Each object can contain:

• id: A unique identifier string.
• icon: An Icon component to be displayed to the left of the menu item label.
• label: A primary string of text for a menu item or a function that receives inputValue as function parameter and returns text to be displayed in for a menu item.

  {
    id: '1',
    icon: (
     <Icon
            assistiveText={{ label: 'add' }}
            category="utility"
            size="x-small"
            name="add"
        />
    ),
    label: 'New Entity'
  }
  

  Tested with snapshot testing.

[]

Array of item objects in the dropdown menu that is displayed above the list of options. onSelect fires when selected. Each object can contain:

• id: A unique identifier string.
• icon: An Icon component to be displayed to the left of the menu item label.
• label: A primary string of text for a menu item or a function that receives inputValue as function parameter and returns text to be displayed in for a menu item.

  {
  id: '1',
  icon: (
    <Icon
        assistiveText={{ label: 'Add in Accounts' }}
        size="x-small"
        category="utility"
        name="search"
    />
  ),
  label: (searchTerm) => {
    return `undefined in Accounts`;
  },
  }
  

  Tested with snapshot testing.

Node of type Combobox for creating grouped comboboxes.

base

Defines Combobox variant styling and functionality