Use a slider for one adjustable value along a bounded range when relative position matters; use text input for precise numeric entry, select for a short fixed set, and toggle switch for binary on/off settings.
Use a slider for one adjustable value along a bounded range when relative position matters; use text input for precise numeric entry, select for a short fixed set, and toggle switch for binary on/off settings.
Practice the judgment: Imagine this situation: A two-stop slider is used for Wi-Fi on/off instead of a switch. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Slider | Text input | Select | Toggle switch |
|---|---|---|---|---|
| UI or UX | UI + UX - Single-value bounded range control | UI + UX - Single-line freeform data-entry control | UI + UX - Single-choice dropdown control | UI + UX - Immediate binary setting control |
| UI guidance | Render one thumb on a track with a persistent label, visible current value, unit, min and max labels, focus state, and disabled or read-only state. | 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 persistent label, hint text, native closed value, finite option list, selected option, and validation state. | Give each control a clear label and visible state. |
| UX guidance | Help users adjust one bounded value quickly when the relative position or intensity matters. | Let users edit normally, validate after interaction or attempted submit, preserve their typed value after errors, and explain exactly how to fix invalid or missing text. | Help the person reach a clear task outcome. | Let users change one reversible setting immediately and understand the applied effect. |
| Good UI | A Brightness slider shows 55%, dim and bright endpoint labels, visible focus, and a paired number input. | A reference-name field has a visible label, hint, medium width, focus ring, and error message beneath the hint when submitted empty. | Persistent label, hint text, visible selected value, readable options, and clear required validation state. | A notifications switch with a stable Notifications label, On or Off state text, large hit target, visible focus, and immediate applied effect. |
| Bad UI | A two-stop slider is styled like a switch but lacks on/off semantics. | The only instruction is placeholder text that disappears when the user starts typing. | Placeholder as the only label. | A red switch labelled Delete account that behaves like an instant destructive command. |
| Good UX | A user adjusts brightness with arrow keys, types 65 in the number field, sees both controls synchronize, and gets a warning near battery-heavy values. | A user leaves the required field blank, sees an error only after submit, returns to the same field, and their later typed value clears the error. | Users can open, scan, choose one value, and review the selected value after close. | Turning the switch on immediately enables the setting and announces the applied effect. |
| Bad UX | A user is asked to choose Small, Medium, or Large through a numeric rail with hidden labels. | Validation fires on the first focus event and blocks typing before the user has had a chance to answer. | Hiding two obvious critical choices in a dropdown. | A switch appears to change but requires a hidden Save button before anything happens. |
| Best fit | Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength. | The answer is short and user-authored. | The user chooses one option from a moderate known list. | A single setting, feature, preference, or hardware-like control has two clear states. |
| Avoid when | Users need to enter an exact, arbitrary, or high-stakes number. | The answer is a paragraph, comment, address block, or explanation requiring multiple lines. | The option set is short and comparison matters. | The action is destructive, one-time, legal, financial, or needs confirmation. |
| Required state | Initial value state with visible label, min, max, current value, and unit. | Empty untouched state with persistent label and optional hint. | Closed state with empty option or current selected value. | Off state. |
| Accessibility burden | Prefer native range input where possible. | Associate every text input with a visible label or equivalent accessible name that matches the visible question. | Prefer native semantics or implement equivalent name, role, state, and keyboard behavior. | Use role switch with aria-checked or a native checkbox implementation that exposes the checked state. |
| Common misuse | Using a slider for a binary on/off choice. | Using placeholder text as the only label or instruction. | Using select to hide two or three obvious choices that should be compared. | Using a switch to delete, publish, pay, submit, or trigger another one-time command. |