Dropdown

Provide a descriptive label for this control, e.g. "Accounts".

This component can render either declaratively, by directly passing a set of children or virtualized, by passing a render callback (function as children).

Children can be of two types: <DropdownItem>s, to generate items; or <DropdownSection>s, when the dropdown is sectioned. Each section can, in turn, have <DropdownItem>s in it.

The recommendation is to use the render callback when a large number of items is provided, since the item list will be virtualized by the component, thus increasing the performance.

When using the render callback, items need to be provided through the items prop. Then, the callback will be called for each item present in the array, and the expected result is a <DropdownItem> or a <DropdownSection> depending on the sectioned prop.

Appends class names to the component.

Should be used only for positioning and spacing purposes.

Message with instructions on how to fill the form field.

If true, the dropdown is not available for interaction.

Icon to display.

Additional information can be displayed in an info tooltip next to the Label.

When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a boolean field or a string. When it is a string, as well as the invalid state being shown, the text will be shown below.

Items to render, in the shape of a list of objects. Usually, each item in the items array contains the required data to generate the corresponding <DropdownItem> (or <DropdownSection> in case the dropdown is sectioned).

This prop is required when rendering items with the render callback (function as children).

Text to display as label.

Display the label inline the form control.

Use only when the component is not inside a Form. In that case set layoutType to Form.LAYOUT_TYPE.SPLIT in the Form component.

To indicate whether an action is in progress, especially in the case that it takes more than 1 second to complete, you should display the loading state.

Callback fired any time the dropdown is closed.

Callback fired when more items must be loaded. This happens when you're lazy loading the items and the items that are about to render cannot be found in the items array.

This callback should be used to fetch/load the missing items from the backend or other sources.

The returned Promise should be resolved once item data has finished loading. It will be used to determine when to refresh the list with the newly-loaded data. This callback may be called multiple times in reaction to a single scroll event.

Callback fired any time the dropdown is opened.

Callback fired any time the search input of the dropdown changes. This callback needs the search prop to be defined.

Callback fired any time the dropdown is toggled.

Specifies the placement of the dropdown relative to the dropdown trigger. Default display is on the bottom start, but you can also choose to display it from the bottom end.

If true, denotes the form field as required.

Number of rows.

By default it's equal to length of array passed in the items prop.

You should specify the rowCount when you know the total number of items but you want to lazy load them while scrolling.

Value of the search input. The search input will be shown only if the value is defined.

Establishes whether the dropdown is sectioned. A sectioned dropdown composes its options grouped by sections (made with <DropdownSection>), where each section is delimited by an optional title at the top, and a horizontal separator at the bottom.

Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like margin or padding. To omit a value, use SPACING_TYPE.OMIT.

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

The text to display in the dropdown button. When not present, an icon must be passed instead.

Type can be:

• Primary — use to call attention to one specific action you want the user to take as a next step.

• Normal (used as secondary) — use when multiple actions need to be displayed.

• Plain — use when multiple actions need to be available that are less important for the user to take.

• Destructive — use when you have a destructive action like delete or remove, which you would like the user to pause and consider before completing.