Skip to content

FieldPickerMenuList ​

Overview ​

The list step shared by the sort and filter add-menus: an eyebrow, a scrollable list of pickable fields, and an empty state. Picking a row emits pick with the field value; the host decides what happens next (the sort menu appends the field, the filter menu drills into that field's form). Centralizes the field-row styling so the two menus cannot drift.

Theme entry: FieldPickerMenuList

Props ​

NameTypeRequiredDefaultDescription
iconOverrideObjectnullA partial icon registry ({ [componentName]: { [iconName]: { component, props } } }) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants.
themeOverrideObjectnullA partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants.
itemsarray[]Pickable options: { value, label }.
eyebrowstring""Eyebrow heading above the list.
emptyTextstring""Message shown when there are no pickable fields left.
itemIconstringnullOptional trailing icon-registry key per row (e.g. "chevronRight" to signal a drill-in).
qastring"field-picker"data-qa base; rows get ${qa}-item, the empty state gets ${qa}-empty.

Events ​

NameDescription
pickEmitted with the picked field value when a row is clicked.

Full event reference

Source ​

client/lib/display/field-picker/FieldPickerMenuList.vue