DEVELOPER REFERENCE · v4.0.0

Dropdown API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

View selects, chips and resources examples →

Dropdown21 props2 callbacks0 methods

Props21

Dropdown props
Name	Type	Description
`environment`Optional	`DropdownEnvironment \| undefined`Inspect type	Dropdown rendering environment, including host integration and event handling.
`triggerAttributes`Optional	`JSX.HTMLAttributes<HTMLDivElement> \| undefined`Inspect type	Additional HTML attributes applied to the dropdown trigger element.
`source`Required	`DropdownOption<T>[]`Inspect type	Data or option source consumed by this component; expand the type for supported representations.
`dataSource`Optional	`DropdownDataSource<T> \| undefined`Inspect type	Optional application-owned remote search and ID resolver. Values must be string/number IDs.
`dataContext`Optional	`unknown`	Row/application context; changing its identity invalidates the remote session.
`remoteText`Optional	`Partial<DropdownRemoteText> \| undefined`Inspect type	Localized messages for loading, empty and failed remote-option requests.
`value`Optional	`T \| T[] \| undefined`Inspect type	Value to display or edit. The declared type identifies the supported representation; change callbacks describe how edited values are emitted.
`placeholder`Optional	`string \| undefined`	Content shown when there is no entered or selected value.
`disabled`Optional	`boolean \| undefined`	Disable all dropdown interaction, including autoOpen and chip removal. Defaults to false. Disabling an open dropdown closes it once; re-enabling does not reopen it automatically. For grid callbacks, use DropdownColumnProps. See the [Dropdown Editor guide](/guides/editors/editor-dropdown/).
`name`Optional	`string \| undefined`	Form field name submitted with the control value.
`id`Optional	`string \| undefined`	Identifier used to associate the control with labels, popup content or other elements.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`style`Optional	`DropdownStyle \| undefined`Inspect type	Inline styles or style configuration applied to this component; expand the type for supported entries.
`config`Optional	`DropdownConfig<T> \| undefined`Inspect type	Component configuration. Expand the type to see accepted fields and alternative forms.
`beforeOutsideClose`Optional	`(() => boolean \| void) \| undefined`Inspect type	Validate or save a draft before outside-pointer dismissal. False keeps it open. Escape, selection and programmatic closure never invoke this callback.
`renderContent`Optional	`((props: { id: string; close: (focusNext?: boolean) => void; }) => DropdownRenderable) \| undefined`Inspect type	Replace the popup body while retaining the shared trigger, tags and positioning. Custom content owns its keyboard navigation and renders a dialog with `id`.
`renderOption`Optional	`((h: HyperFunc<DropdownVNode>, option: DropdownOption<T>, isSelected: boolean) => DropdownRenderable) \| undefined`Inspect type	Custom renderer for an option and its current selection/disabled state.
`renderValue`Optional	`((h: HyperFunc<DropdownVNode>, option: DropdownOption<T>) => DropdownRenderable) \| undefined`Inspect type	Render the content of each selected value while preserving the built-in single/multi-select wrappers, remove controls, and expand indicator.
`renderPlaceholder`Optional	`((h: HyperFunc<DropdownVNode>, placeholder: string, children: DropdownRenderable) => DropdownRenderable) \| undefined`Inspect type	Custom renderer for the dropdown placeholder when no option is selected.
`renderSelectedValue`Optional	`((h: HyperFunc<DropdownVNode>, selectedOptions: DropdownOption<T>[], children: DropdownRenderable) => DropdownRenderable) \| undefined`Inspect type	Render the selected value
`renderNoResults`Optional	`((h: HyperFunc<DropdownVNode>) => DropdownRenderable) \| undefined`Inspect type	Custom renderer for an empty options list.

Events and callbacks2

Dropdown events and callbacks
Name	Type	Description
`onChange`Optional	`((value: T \| T[]) => void) \| undefined`Inspect type	Receives the new value when the user changes the control. Update the corresponding value prop for controlled use.
`onClose`Optional	`((focusNext?: boolean) => void) \| undefined`Inspect type	Requests that the parent close the surface or picker.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.