• /
  • Log in

Dropdown

<Dropdown> are toggleable overlays for displaying a list of options.

The <Dropdown> component can render the items in two ways: as an array of <DropdownItem> elements or as a render callback (Function as Children).

The recommendation is to use the render callback when a large number of items is provided because then the dropdown will virtualize all the items and performance will be greatly improve.

If you are willing to use <Dropdown> to paint a select field as you would do in a form, use <Select> instead.

The component also supports nested lists, check out the DropdownItem documentation to learn more.

Usage

import { Dropdown } from 'nr1'

Examples

Props

ariaLabelstring

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

childrenrequirednode|function

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.

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

descriptionstring

Message with instructions on how to fill the form field.

disabledboolean

If true, the dropdown is not available for interaction.

iconTypeenum

Icon to display.

<One of
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__AREA_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__BAR_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_ADD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_EDIT,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__CHART__A_REMOVE,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_ADD,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_EDIT,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_FILTER,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__DASHBOARD__A_REMOVE,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__LINE_CHART,
Dropdown.ICON_TYPE.DATAVIZ__DATAVIZ__PIE_CHART,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE__A_ADD,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__DATE__A_REMOVE,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME__A_ADD,
Dropdown.ICON_TYPE.DATE_AND_TIME__DATE_AND_TIME__TIME__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__ATTACHMENT,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__DOCUMENTATION,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__EMAIL,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__EMAIL__V_ALTERNATE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FILE__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__FOLDER__A_REMOVE,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_ADD,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_EDIT,
Dropdown.ICON_TYPE.DOCUMENTS__DOCUMENTS__NOTES__A_REMOVE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__ANOMALIES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CLUSTER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__CPU,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__DESKTOP__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MEMORY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__MOBILE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__NETWORK__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_ADD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_CONFIGURE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_EDIT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_INSPECT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_PAUSE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__A_REMOVE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__SERVER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__HARDWARE__STORAGE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_CLUSTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_CONTAINER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_MASTER_NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_NAMESPACE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_POD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__KUBERNETES__K8S_SERVICE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__ALL_ENTITIES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__APPLICATION__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CLOUD,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CONTAINER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CONTROL_CENTER,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CORRELATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__CORRELATION_REASONING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DATABASE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DECISIONS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DESTINATIONS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DOWNSTREAM_CONNECTION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__DOWNSTREAM_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__EVENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__FEED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__LIVE_VIEW,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__LOGS,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MOBILE_APPLICATION__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__MONITORING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__NODE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__OVERVIEW,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PATHWAY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__PLUGIN__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__QUERY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__A_CHECKED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_DISABLED,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_ERROR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_OK,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SERVICE__S_WARNING,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SOURCES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__STACK_TRACE,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYNTHESIZED_ENTITY,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYNTHETICS_MONITOR,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__SYSTEM,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__TRACES,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__TRAFFIC,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__UPSTREAM_CONNECTION,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__UPSTREAM_DEPLOYMENT,
Dropdown.ICON_TYPE.HARDWARE_AND_SOFTWARE__SOFTWARE__WORKLOADS,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_BOTTOM__V_ALTERNATE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_BOTTOM_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_BOTTOM_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_TOP_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_DIAGONAL_TOP_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_HORIZONTAL,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_LEFT__V_ALTERNATE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_RIGHT__V_ALTERNATE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_TOP,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_TOP__V_ALTERNATE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__ARROW__ARROW_VERTICAL,
Dropdown.ICON_TYPE.INTERFACE__ARROW__EXPAND,
Dropdown.ICON_TYPE.INTERFACE__ARROW__GO_TO,
Dropdown.ICON_TYPE.INTERFACE__ARROW__MOVE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RESIZE,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RETURN_LEFT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__RETURN_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__ARROW__SHRINK,
Dropdown.ICON_TYPE.INTERFACE__ARROW__SORT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_BOTTOM__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_LEFT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_RIGHT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CARET__CARET_TOP__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_BOTTOM__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_LEFT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_RIGHT__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__CHEVRON__CHEVRON_TOP__WEIGHT_BOLD__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__INFO__ANNOUNCEMENT,
Dropdown.ICON_TYPE.INTERFACE__INFO__HELP,
Dropdown.ICON_TYPE.INTERFACE__INFO__INFO,
Dropdown.ICON_TYPE.INTERFACE__INFO__INFO__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ADJUST,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__S_OFF,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ALERT__S_ON,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__ARCHIVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CENTER,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CLOSE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__CONFIGURE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__COPY_TO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__COPY_TO_CLIPBOARD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__DOWNLOAD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__DRAG,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EDIT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EXPORT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__EXTERNAL_LINK,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__A_ADD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FILTER__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__FOLLOW,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP__A_REMOVE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__GROUP__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIDE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIDE_OTHERS,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__HIGHLIGHT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__IMPORT,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__MORE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PAUSE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PAUSE_ALTERNATE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PIN,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PLAY,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__PLAY_ALTERNATE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REARRANGE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REDO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REFRESH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__REMOVE__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SEARCH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SEARCH__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SELECTION,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SELECTION__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHARE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHARE_LINK,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SHOW,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SKIP_BACK,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__SKIP_FORWARD,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TAG,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TRASH,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TV_MODE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__TV_MODE__A_TV_MODE,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UNDO,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UNPIN,
Dropdown.ICON_TYPE.INTERFACE__OPERATIONS__UPLOAD,
Dropdown.ICON_TYPE.INTERFACE__PLACEHOLDERS__CUSTOM_PLACEHOLDER,
Dropdown.ICON_TYPE.INTERFACE__PLACEHOLDERS__ICON_PLACEHOLDER,
Dropdown.ICON_TYPE.INTERFACE__SIGN__ASTERISK,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CHECKMARK,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CHECKMARK__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CHECKMARK__V_ALTERNATE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__SIGN__CLOSE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__DOLLAR_SIGN,
Dropdown.ICON_TYPE.INTERFACE__SIGN__EXCLAMATION,
Dropdown.ICON_TYPE.INTERFACE__SIGN__EXCLAMATION__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__MINUS,
Dropdown.ICON_TYPE.INTERFACE__SIGN__MINUS__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__NUMBER,
Dropdown.ICON_TYPE.INTERFACE__SIGN__PLUS,
Dropdown.ICON_TYPE.INTERFACE__SIGN__PLUS__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES__SIZE_8,
Dropdown.ICON_TYPE.INTERFACE__SIGN__TIMES__V_ALTERNATE,
Dropdown.ICON_TYPE.INTERFACE__STATE__CLOSED,
Dropdown.ICON_TYPE.INTERFACE__STATE__CRITICAL,
Dropdown.ICON_TYPE.INTERFACE__STATE__CRITICAL__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__STATE__DISABLED,
Dropdown.ICON_TYPE.INTERFACE__STATE__ENABLED,
Dropdown.ICON_TYPE.INTERFACE__STATE__HEALTHY,
Dropdown.ICON_TYPE.INTERFACE__STATE__LOADING,
Dropdown.ICON_TYPE.INTERFACE__STATE__LOCK,
Dropdown.ICON_TYPE.INTERFACE__STATE__OPEN,
Dropdown.ICON_TYPE.INTERFACE__STATE__PRIVATE,
Dropdown.ICON_TYPE.INTERFACE__STATE__PUBLIC,
Dropdown.ICON_TYPE.INTERFACE__STATE__UNAVAILABLE,
Dropdown.ICON_TYPE.INTERFACE__STATE__UNLOCK,
Dropdown.ICON_TYPE.INTERFACE__STATE__WARNING,
Dropdown.ICON_TYPE.INTERFACE__STATE__WARNING__WEIGHT_BOLD,
Dropdown.ICON_TYPE.INTERFACE__VIEW__ENTER_FULL_SCREEN,
Dropdown.ICON_TYPE.INTERFACE__VIEW__EXIT_FULL_SCREEN,
Dropdown.ICON_TYPE.INTERFACE__VIEW__GRID_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__HIGH_DENSITY_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__LAYER_LIST,
Dropdown.ICON_TYPE.INTERFACE__VIEW__LIST_VIEW,
Dropdown.ICON_TYPE.INTERFACE__VIEW__SIXTH_SENSE,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE__S_DARK,
Dropdown.ICON_TYPE.INTERFACE__VIEW__THEME_TOGGLE__S_LIGHT,
Dropdown.ICON_TYPE.LOCATION__LOCATION__HOME,
Dropdown.ICON_TYPE.LOCATION__LOCATION__MAP,
Dropdown.ICON_TYPE.LOCATION__LOCATION__PIN,
Dropdown.ICON_TYPE.LOCATION__LOCATION__WORLD,
Dropdown.ICON_TYPE.PROFILES__EVENTS__COMMENT,
Dropdown.ICON_TYPE.PROFILES__EVENTS__COMMENT__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__EVENTS__FAVORITE,
Dropdown.ICON_TYPE.PROFILES__EVENTS__FAVORITE__WEIGHT_BOLD,
Dropdown.ICON_TYPE.PROFILES__EVENTS__LIKE,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__ORGANIZATION__A_REMOVE,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__TEAM__A_REMOVE,
Dropdown.ICON_TYPE.PROFILES__USERS__USER,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_ADD,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_EDIT,
Dropdown.ICON_TYPE.PROFILES__USERS__USER__A_REMOVE,
>
infostring

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

invalidboolean|string

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.

itemsarray

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).

labelstring

Text to display as label.

labelInlineboolean

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.

loadingboolean
DEFAULT
false

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.

onClosefunction

Callback fired any time the dropdown is closed.

function (
event: React.MouseEvent
)
onLoadMorefunction

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.

function (
cursor: Cursor //

Items to load.

)
onOpenfunction

Callback fired any time the dropdown is opened.

function (
event: React.MouseEvent
)
onSearchfunction

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

function (
event: React.ChangeEvent
)
onTogglefunction

Callback fired any time the dropdown is toggled.

function (
event: React.MouseEvent,
opened: boolean
)
placementTypeenum
DEFAULT
Dropdown.PLACEMENT_TYPE.BOTTOM_START

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.

<One of
Dropdown.PLACEMENT_TYPE.BOTTOM_END,
Dropdown.PLACEMENT_TYPE.BOTTOM_START,
>
requiredboolean
DEFAULT
false

If true, denotes the form field as required.

rowCountnumber

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.

searchstring

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

sectionedboolean
DEFAULT
false

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.

spacingTypeenum[]

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.

<Array of
<One of
Dropdown.SPACING_TYPE.EXTRA_LARGE,
Dropdown.SPACING_TYPE.LARGE,
Dropdown.SPACING_TYPE.MEDIUM,
Dropdown.SPACING_TYPE.NONE,
Dropdown.SPACING_TYPE.OMIT,
Dropdown.SPACING_TYPE.SMALL,
>
>
styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id attribute.

Use it to target the component in unit and e2e tests.

titlestring
DEFAULT
""

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

typeenum
DEFAULT
Dropdown.TYPE.NORMAL

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.

<One of
Dropdown.TYPE.DESTRUCTIVE,
Dropdown.TYPE.NORMAL,
Dropdown.TYPE.PLAIN,
Dropdown.TYPE.PLAIN_NEUTRAL,
Dropdown.TYPE.PRIMARY,
>

Type definitions

DropdownRendererArguments

{
item: string, //

Item to render

index: number, //

Index of the item in the items array

items: string[], //

Array of items which we're iterating on

}

Cursor

{
startIndex: number, //

First index of the range of items to load.

stopIndex: number, //

Last index of the range of items to load.

}
Create issueEdit page
Copyright © 2021 New Relic Inc.