The Good, The Bad and The UX

A collection of UX patterns with comparative examples

Back to all examples
Forms

Autofocus on Modal input

When a modal opens with a single input, it should be automatically focused

modalinputaccessibilitymobile

Bad example

Good example

Autofocus on Modal

Description

When a modal opens with a single input (or a primary field), it should be automatically focused to allow the user to start typing immediately.

Why it matters

  • Efficiency: Users can start typing without additional action
  • Accessibility: Keyboard users don't need to navigate to find the input
  • User experience: Reduces friction and speeds up interactions

When to apply

  • Modals with a single input field
  • Search modals
  • Simple forms (quick add item)

When not to apply

  • Modals with multiple fields without a clear hierarchy
  • Confirmation modals (focus should be on the confirmation button)
  • Modals with content to read before interaction

Explore more examples

Forms

Disable submit button during loading

Prevent double submissions by disabling the button and showing a spinner

View example
Forms

Verification code paste support

Allow users to paste verification codes instead of typing digit by digit

View example
Forms

Auto-submit verification code

Automatically validate the code when all digits are entered instead of requiring manual submission

View example