UX Patterns Guide
Back to compare picker

Inaccessible custom select vs Select vs Autocomplete vs Multi-select

Flag inaccessible custom select when a visual dropdown lacks keyboard opening, option navigation, selected state, focus return, accessible value, or submitted form value.

Inaccessible custom select live exampleSelect live exampleAutocomplete live exampleMulti-select live example

Decision dimensions

Dimension Inaccessible custom selectSelectAutocompleteMulti-select
UI or UX UI + UX - Broken custom widget anti-patternUI + UX - Single-choice dropdown controlUI + UX - Input widget with suggestion behaviorUI + UX - Multi-value picker widget
UI guidance Replace fake select markup with a native select unless a custom listbox, combobox, or multi-select contract is truly required and fully implemented.Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.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 Let every user complete the same choice with pointer, keyboard, touch, voice, and assistive technology instead of making styling work for only one input method.Help users choose one value from a moderate known list without showing every option permanently.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 native select keeps its persistent label, selected value, required validation, and platform keyboard behavior.Persistent label, hint text, visible selected value, readable options, and clear required validation state.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 div styled like a dropdown opens only on click and exposes no option roles or current value.Placeholder as the only label.Placeholder-only label that disappears after typing.Selected values hidden inside a closed dropdown.
Good UX Keyboard users can open, navigate, select, dismiss, and continue without losing focus or value.Users can open, scan, choose one value, and review the selected value after close.Typing filters suggestions while preserving the exact typed value.Users can search, add, remove, review, and submit multiple values without losing context.
Bad UX Click-only menu traps or loses focus and cannot be completed from the keyboard.Hiding two obvious critical choices in a dropdown.Automatically forcing the first suggestion into the field.Removing a value is impossible by keyboard.
Best fit Use this anti-pattern entry to audit custom dropdowns, styled select replacements, portal menus, command-palette-like selectors, and generated UIs that imitate native controls.The user chooses one option from a moderate known list.The list is long but values are known.Users choose many values from a long predefined list.
Avoid when The implementation uses native select with persistent label, selected value, validation, and no auto-submit.The option set is short and comparison matters.The task is open-ended query exploration.The set is short and independent choices should stay visible.
Required state Closed state with persistent label, current value, and collapsed state.Closed state with empty option or current selected value.Empty input state.No selected values state with empty selected set.
Accessibility burden Expose name, role, value, expanded state, popup relationship, active option, and selected option state when implementing custom choice widgets.Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.Expose combobox expanded state, active descendant, and option labels.Expose selected state for options and labels for remove controls.
Common misuse Using divs with click handlers and no role, label, expanded state, or option semantics.Custom select with no keyboard support or hidden selected state.Forcing the first suggestion when the user did not choose it.Hiding selected values inside a closed menu.

Inaccessible custom select

UI or UX
UI + UX - Broken custom widget anti-pattern
UI guidance
Replace fake select markup with a native select unless a custom listbox, combobox, or multi-select contract is truly required and fully implemented.
UX guidance
Let every user complete the same choice with pointer, keyboard, touch, voice, and assistive technology instead of making styling work for only one input method.
Good UI
A native select keeps its persistent label, selected value, required validation, and platform keyboard behavior.
Bad UI
A div styled like a dropdown opens only on click and exposes no option roles or current value.
Good UX
Keyboard users can open, navigate, select, dismiss, and continue without losing focus or value.
Bad UX
Click-only menu traps or loses focus and cannot be completed from the keyboard.
Best fit
Use this anti-pattern entry to audit custom dropdowns, styled select replacements, portal menus, command-palette-like selectors, and generated UIs that imitate native controls.
Avoid when
The implementation uses native select with persistent label, selected value, validation, and no auto-submit.
Required state
Closed state with persistent label, current value, and collapsed state.
Accessibility burden
Expose name, role, value, expanded state, popup relationship, active option, and selected option state when implementing custom choice widgets.
Common misuse
Using divs with click handlers and no role, label, expanded state, or option semantics.

Select

UI or UX
UI + UX - Single-choice dropdown control
UI guidance
Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.
UX guidance
Help users choose one value from a moderate known list without showing every option permanently.
Good UI
Persistent label, hint text, visible selected value, readable options, and clear required validation state.
Bad UI
Placeholder as the only label.
Good UX
Users can open, scan, choose one value, and review the selected value after close.
Bad UX
Hiding two obvious critical choices in a dropdown.
Best fit
The user chooses one option from a moderate known list.
Avoid when
The option set is short and comparison matters.
Required state
Closed state with empty option or current selected value.
Accessibility burden
Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.
Common misuse
Custom select with no keyboard support or hidden selected state.

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
  • Flag inaccessible custom select when a visual dropdown lacks keyboard opening, option navigation, selected state, focus return, accessible value, or submitted form value.
  • Use native select when the user chooses one value from a finite known list and the platform control satisfies labeling, validation, keyboard, and mobile behavior.
  • Use a custom listbox-style select only when native select cannot meet a documented requirement and the component exposes label, current value, expanded state, active option, and selected option.
  • Use autocomplete when users need to type, filter, or complete a long known list while preserving typed input and suggestion selection rules.
  • Use multi-select when users can choose more than one value and need visible selected chips, removal, clear-all, filtering, and multi-value submission.
  • Use radio group instead of any dropdown when the list is short and visible comparison or consequence review matters.
  • Do not auto-submit or navigate while users arrow through select options or custom listbox options.
  • Do not ship a custom dropdown until pointer, keyboard, touch, screen reader, form validation, reset, and server-submission behavior all agree on the selected value.
Inspect live examples
Inaccessible custom selectSelectAutocompleteMulti-select
Failure modes
  • A fake select updates visual text but submits an empty value.
  • Keyboard users cannot open the options or recover focus after closing.
  • Screen readers hear a generic clickable element instead of a named choice control.
  • A custom dropdown is reused for autocomplete without typed filtering semantics.
  • A single-select popup is used for multiple choices but closes after every selection and hides selected values.
  • Options are clipped by overflow or portals and cannot be reached at zoom or mobile widths.