UX Patterns Guide
Back to compare picker

Text input vs Autocomplete vs Select vs Radio group

Prefer text input when the answer is short, user-authored, and cannot be usefully enumerated as a fixed option list.

Text input live exampleAutocomplete live exampleSelect live exampleRadio group live example

Decision dimensions

Dimension Text inputAutocompleteSelectRadio group
UI or UX UI + UX - Single-line freeform data-entry controlUI + UX - Input widget with suggestion behaviorUI + UX - Single-choice dropdown controlUI + UX - Single-choice form control
UI guidance Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.Render a labeled text field, suggestion popup, highlighted option, selected value, and no-match state.Render a persistent label, hint text, native closed value, finite option list, selected option, and validation state.Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation.
UX guidance Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.Help users complete a known value faster without forcing an incorrect suggestion.Help users choose one value from a moderate known list without showing every option permanently.Help users compare the available options and choose exactly one without opening an extra control.
Good UI A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.Persistent label above the input, readable text size, clear popup alignment, and visible highlighted option.Persistent label, hint text, visible selected value, readable options, and clear required validation state.Visible native radio options with a clear legend, selected state, focus state, and helper text.
Bad UI The only instruction is placeholder text that disappears when the user starts typing.Placeholder-only label that disappears after typing.Placeholder as the only label.Custom circles that do not show focus or selected state clearly.
Good UX A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.Typing filters suggestions while preserving the exact typed value.Users can open, scan, choose one value, and review the selected value after close.Exactly one option is selected at a time and labels are clickable.
Bad UX Validation fires on the first focus event and blocks typing before the user has had a chance to answer.Automatically forcing the first suggestion into the field.Hiding two obvious critical choices in a dropdown.Using radios for choices where multiple selections are allowed.
Best fit The answer is short and user-authored.The list is long but values are known.The user chooses one option from a moderate known list.Users must choose exactly one option.
Avoid when The answer is a paragraph, comment, address block, or explanation requiring multiple lines.The task is open-ended query exploration.The option set is short and comparison matters.Users can choose multiple options.
Required state Empty untouched state with persistent label and optional hint.Empty input state.Closed state with empty option or current selected value.No selection state for required unanswered groups.
Accessibility burden Associate every text input with a visible label or equivalent accessible name that matches the visible question.Expose combobox expanded state, active descendant, and option labels.Prefer native semantics or implement equivalent name, role, state, and keyboard behavior.Use a programmatic group label through fieldset/legend or an accessible radiogroup name.
Common misuse Using placeholder text as the only label or instruction.Forcing the first suggestion when the user did not choose it.Custom select with no keyboard support or hidden selected state.Using radios for independent choices where several answers can be true.

Text input

UI or UX
UI + UX - Single-line freeform data-entry control
UI guidance
Render a persistent label, appropriately sized single-line input, optional hint, visible focus state, and nearby error text that is programmatically associated with the field.
UX guidance
Use text input for short freeform answers that users can type or paste and that cannot be accurately represented as a fixed option choice.
Good UI
A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty.
Bad UI
The only instruction is placeholder text that disappears when the user starts typing.
Good UX
A user types or pastes a short reference, submits it, and the interface confirms the stored value without changing their wording.
Bad UX
Validation fires on the first focus event and blocks typing before the user has had a chance to answer.
Best fit
The answer is short and user-authored.
Avoid when
The answer is a paragraph, comment, address block, or explanation requiring multiple lines.
Required state
Empty untouched state with persistent label and optional hint.
Accessibility burden
Associate every text input with a visible label or equivalent accessible name that matches the visible question.
Common misuse
Using placeholder text as the only label or instruction.

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.

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.

Radio group

UI or UX
UI + UX - Single-choice form control
UI guidance
Render a fieldset/legend with visible native radio options, selected state, focus state, optional hints, and group-level validation.
UX guidance
Help users compare the available options and choose exactly one without opening an extra control.
Good UI
Visible native radio options with a clear legend, selected state, focus state, and helper text.
Bad UI
Custom circles that do not show focus or selected state clearly.
Good UX
Exactly one option is selected at a time and labels are clickable.
Bad UX
Using radios for choices where multiple selections are allowed.
Best fit
Users must choose exactly one option.
Avoid when
Users can choose multiple options.
Required state
No selection state for required unanswered groups.
Accessibility burden
Use a programmatic group label through fieldset/legend or an accessible radiogroup name.
Common misuse
Using radios for independent choices where several answers can be true.
Decision rules
  • Prefer text input when the answer is short, user-authored, and cannot be usefully enumerated as a fixed option list.
  • Prefer autocomplete when the user is still typing into a field but the valid answer should resolve to one known record, product, address, tag, or code.
  • Prefer select when the user must choose one value from a finite moderate list and seeing every option at once is not critical.
  • Prefer radio group when the choice set is short, mutually exclusive, and users benefit from comparing every option before deciding.
  • Use textarea instead of text input when the expected answer has sentence or paragraph structure, needs line breaks, or should visibly support extended writing.
  • Use specialized text inputs such as email, password, phone, date, card, prefix/suffix, or input mask only when the answer has domain-specific parsing, keyboard, validation, or privacy behavior.
  • Do not use placeholder text as the only label for text input; persistent labels and nearby hints remain available after typing starts.
  • Do not validate a text input before the user has interacted with it, except for server-returned errors on an attempted submission.
  • Match the visible input width to the expected answer length so users do not infer a paragraph answer from a short field or a short code from a wide field.
  • If the field accepts pasted content or arbitrary text, do not replace it with select, radio, or autocomplete merely to make data cleaner.
Inspect live examples
Text inputAutocompleteSelectRadio group
Failure modes
  • A freeform answer is forced into a select, causing users to choose an inaccurate option.
  • A single-line text input is used for paragraph comments, hiding overflow and making review hard.
  • A placeholder disappears after typing, leaving no persistent label or instruction.
  • Inline validation fires on focus or the first keystroke and blocks normal editing.
  • A short code field is rendered full-width, making users think long prose is expected.
  • A known-value identifier is accepted as arbitrary text even though downstream systems need a selected record ID.