UX Patterns Guide
Back to compare picker

Object picker vs Combobox vs Autocomplete vs Multi-select

Prefer object picker when the submitted value is an entity ID, record key, account ID, user ID, group ID, file ID, or project ID rather than only the visible label.

Object picker live exampleCombobox live exampleAutocomplete live exampleMulti-select live example

Decision dimensions

Dimension Object pickerComboboxAutocompleteMulti-select
UI or UX UI + UX - Existing-entity lookup and selected-object confirmationUI + UX - Single-value input widget with owned popupUI + UX - Input widget with suggestion behaviorUI + UX - Multi-value picker widget
UI guidance Render a labelled lookup field with search text, scoped result list, active result, selected object chip or preview, object type, stable ID or equivalent key, secondary metadata, clear action, no-result state, loading state, and validation text.Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance Use an object picker when the user must choose an existing entity whose identity matters beyond the displayed label, such as a record, person, group, account, file, team, project, or workspace.Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.Help users complete a known value faster without forcing an incorrect suggestion.Help users choose multiple values from a large, compact, or dynamic option set.
Good UI A Related account field shows two Acme Retail records with account ID, region, status, and owner, then displays a selected-object preview card before saving.An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.Selected values are shown as removable chips or checked rows with clear labels.
Bad UI A text field accepts Acme Retail as free text even though the backend needs a record ID.A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.Placeholder-only label that disappears after typing.Selected values hidden inside a closed dropdown.
Good UX A user searches Acme, compares two same-named records by region and status, selects the active EMEA account, and reviews the selected account ID before saving.A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.Typing filters suggestions while preserving the exact typed value.Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX A user types a person name and presses Save, but no actual user account was selected.The component automatically commits the first match as soon as a user types one character.Automatically forcing the first suggestion into the field.Removing a value is impossible by keyboard.
Best fit Users assign, link, reference, invite, route, or attach an existing entity.Users choose one value from a large, dynamic, or filterable option set.The list is long but values are known.Users choose many values from a long predefined list.
Avoid when Any arbitrary text is valid.The list is short enough for native select, radio buttons, or segmented controls.The task is open-ended query exploration.The set is short and independent choices should stay visible.
Required state Empty object lookup field with label, helper text, and current search scope.Collapsed empty state with label, help text, and popup affordance.Empty input state.No selected values state with empty selected set.
Accessibility burden Give the lookup field a persistent label and helper text that explains the expected object type.Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.Expose combobox expanded state, active descendant, and option labels.Expose selected state for options and labels for remove controls.
Common misuse Treating the picker as a free text field when the system requires an existing object ID.Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.Forcing the first suggestion when the user did not choose it.Hiding selected values inside a closed menu.

Object picker

UI or UX
UI + UX - Existing-entity lookup and selected-object confirmation
UI guidance
Render a labelled lookup field with search text, scoped result list, active result, selected object chip or preview, object type, stable ID or equivalent key, secondary metadata, clear action, no-result state, loading state, and validation text.
UX guidance
Use an object picker when the user must choose an existing entity whose identity matters beyond the displayed label, such as a record, person, group, account, file, team, project, or workspace.
Good UI
A Related account field shows two Acme Retail records with account ID, region, status, and owner, then displays a selected-object preview card before saving.
Bad UI
A text field accepts Acme Retail as free text even though the backend needs a record ID.
Good UX
A user searches Acme, compares two same-named records by region and status, selects the active EMEA account, and reviews the selected account ID before saving.
Bad UX
A user types a person name and presses Save, but no actual user account was selected.
Best fit
Users assign, link, reference, invite, route, or attach an existing entity.
Avoid when
Any arbitrary text is valid.
Required state
Empty object lookup field with label, helper text, and current search scope.
Accessibility burden
Give the lookup field a persistent label and helper text that explains the expected object type.
Common misuse
Treating the picker as a free text field when the system requires an existing object ID.

Combobox

UI or UX
UI + UX - Single-value input widget with owned popup
UI guidance
Render a persistent label, editable or select-only value surface, popup indicator, collapsed and expanded states, option popup, active option, committed selection, clear action when supported, help text, and error text.
UX guidance
Use a combobox when users need one value from a large or dynamic option set and benefit from opening a popup, typing to narrow it, or copying/editing the displayed value.
Good UI
An Assignee combobox shows a label, typed text, disclosure button, active option in a listbox, selected-value status, and an error when typed text has no accepted option.
Bad UI
A custom dropdown displays matching labels but never exposes expanded state, active option, or the controlled popup.
Good UX
A user types Ada, moves the active option with Arrow Down, presses Enter to accept Ada Lovelace, then edits the label and sees the selected ID clear until a new option is accepted.
Bad UX
The component automatically commits the first match as soon as a user types one character.
Best fit
Users choose one value from a large, dynamic, or filterable option set.
Avoid when
The list is short enough for native select, radio buttons, or segmented controls.
Required state
Collapsed empty state with label, help text, and popup affordance.
Accessibility burden
Expose the value surface with role combobox or a native control that maps correctly to combobox semantics.
Common misuse
Using a custom combobox for a short list where native select, radio buttons, or segmented controls would be simpler.

Autocomplete

UI or UX
UI + UX - Input widget with suggestion behavior
UI guidance
Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.
UX guidance
Help users complete a known value faster without forcing an incorrect suggestion.
Good UI
Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.
Bad UI
Placeholder-only label that disappears after typing.
Good UX
Typing filters suggestions while preserving the exact typed value.
Bad UX
Automatically forcing the first suggestion into the field.
Best fit
The list is long but values are known.
Avoid when
The task is open-ended query exploration.
Required state
Empty input state.
Accessibility burden
Expose combobox expanded state, active descendant, and option labels.
Common misuse
Forcing the first suggestion when the user did not choose it.

Multi-select

UI or UX
UI + UX - Multi-value picker widget
UI guidance
Render a filter input, open option list, selected-value chips, remove controls, checked option states, clear-all control, and validation state.
UX guidance
Help users choose multiple values from a large, compact, or dynamic option set.
Good UI
Selected values are shown as removable chips or checked rows with clear labels.
Bad UI
Selected values hidden inside a closed dropdown.
Good UX
Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX
Removing a value is impossible by keyboard.
Best fit
Users choose many values from a long predefined list.
Avoid when
The set is short and independent choices should stay visible.
Required state
No selected values state with empty selected set.
Accessibility burden
Expose selected state for options and labels for remove controls.
Common misuse
Hiding selected values inside a closed menu.
Decision rules
  • Prefer object picker when the submitted value is an entity ID, record key, account ID, user ID, group ID, file ID, or project ID rather than only the visible label.
  • Prefer object picker over a generic combobox when duplicate names, object type, status, owner, scope, permissions, or a preview panel are needed before a user can safely commit the entity.
  • Prefer combobox when the main requirement is a single field with popup ownership, active option movement, acceptance, cancellation, and synchronized selected value, but the choices do not need entity preview or record-scope controls.
  • Prefer autocomplete when the problem is completing a known text value from suggestions; upgrade to object picker when choosing the wrong same-named record has durable consequences.
  • Prefer multi-select when users choose several values and review them as chips; use object picker when each chosen item needs identity metadata, lookup scope, permission checks, or a confirmation preview.
  • If free text is valid, use combobox or autocomplete with a clear custom-value policy; object pickers should reject unresolved text because the system needs an existing object.
  • If the candidate set is hierarchical, use tree selection instead of flattening nested records into an object picker without levels or parent context.
  • If users need to move objects into a separate selected destination set with ordering, use transfer list instead of hiding the selected set in one picker field.
  • Show duplicate labels with secondary fields such as type, owner, location, email, status, or ID; do not rely on row order to distinguish entities.
  • Clear or mark the submitted object ID unresolved whenever the visible text changes after selection, and require an explicit object selection before save.
Inspect live examples
Object pickerComboboxAutocompleteMulti-select
Failure modes
  • The user selects Acme Retail but the system submits a stale hidden ID for a different Acme Retail record after the label is edited.
  • Search results show duplicate names with no type, owner, status, or identifier, forcing users to guess which object will be linked.
  • The picker searches every object the user can access when the task needs a scoped account, project, group, or directory segment.
  • A custom picker lets users type any text even though the backend requires an existing record ID.
  • Selected objects appear only as labels and cannot be inspected, cleared, or verified before submission.
  • The UI exposes avatars or icons but no accessible names, selected state, no-result state, loading state, or validation message.