UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Input Mode and Control Matching

Controls should match decision shape: toggles for binary, segmented controls for modes, menus for option sets, sliders for continuous values.

inputscontrolsforms

Design Principle

The wrong control adds cognitive cost and makes reversibility unclear.

Principle The wrong control adds cognitive cost and makes reversibility unclear.

Design action Choose checkbox, toggle, select, tabs, segmented control, or slider by input semantics; labels must clarify current value and impact.

Examples Positive example: Filters, settings, parameters, and publishing visibility. Counterexample: Binary options use dropdowns.

Apply when Filters, settings, parameters, and publishing visibility. Users need to adjust options quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Choose checkbox, toggle, select, tabs, segmented control, or slider by input semantics; labels must clarify current value and impact.

Apply When

  • Filters, settings, parameters, and publishing visibility.
  • Users need to adjust options quickly.

Avoid

  • Binary options use dropdowns.
  • Mutually exclusive modes use unrelated buttons.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
82%
Version
v1
Published
6/6/2026