Decide by comparison
Compare neighboring concepts.
46 comparisons answer a precise decision with one rule, nine dimensions, and sources.
Not sure what to compare?
Start from a real situation.
Answer up to three questions to get a recommended concept, its alternatives, and the lab to test.
Change view or reveal content
Should the control switch views, choose a compact mode, or reveal content in the flow?
- Accordion vs Segmented controlChoose Accordion if the user opens optional detail sections, like FAQ answers, and may leave several open. Choose Segmented control if the user switches a compact setting or display mode among two to five values.See the decision
- Accordion vs TabsChoose Accordion if several sections may stay open at once and read top to bottom, like a FAQ. Choose Tabs if the views are peers and only one should occupy the space at a time.See the decision
- Segmented control vs TabsChoose Segmented control if the choice is a value, such as a sort order or a unit, that changes how the same content is shown. Choose Tabs if each option shows its own panel of content within one shared area.See the decision
Modal surfaces
Is the task about acting, confirming a consequential decision, or viewing media?
- Alert dialog vs LightboxChoose Alert dialog if the user must decide before a consequential action. Choose Lightbox if viewing media at a larger size is the task, with no consequential decision.See the decision
- Alert dialog vs Modal dialogChoose Alert dialog if the user must confirm or cancel a consequential action, with no other input. Choose Modal dialog if the task needs several fields or steps while the page stays in the background.See the decision
- Lightbox vs Modal dialogChoose Lightbox if viewing or browsing images or videos is the primary task. Choose Modal dialog if the user fills in a form or completes another contained task.See the decision
Inform the user
Is the message transient, persistent in context, or global to the page?
- Banner vs Inline alertChoose Banner if the message concerns the whole page or session, such as scheduled maintenance. Choose Inline alert if the message explains a problem in one form, field, or upload, right where it happened.See the decision
- Banner vs ToastChoose Banner if the condition persists and the user must keep it in mind while using the page. Choose Toast if you confirm a low-risk background result that needs no action.See the decision
- Inline alert vs ToastChoose Inline alert if the message must stay visible until the problem is resolved, such as a form error. Choose Toast if you confirm a low-risk result the user can ignore without consequence.See the decision
Edge-attached surfaces
Should the surface stay persistent, enter from a side edge, or rise from the bottom?
- Bottom sheet vs DrawerChoose Bottom sheet if the action is compact, especially on mobile, and benefits from staying above the content. Choose Drawer if the panel is more structured and enters from the left or right.See the decision
- Bottom sheet vs SidebarChoose Bottom sheet if the surface appears for a one-off task, especially on mobile, then goes away. Choose Sidebar if navigation must stay visible and persistent in the workspace.See the decision
- Drawer vs SidebarChoose Drawer if the panel opens for a focused task and then closes, such as filters or a detail view. Choose Sidebar if the region must stay in place for navigation or persistent tools.See the decision
Orient within a journey
Should this locate the page in a hierarchy, move across result pages, or show a process stage?
- Breadcrumbs vs PaginationChoose Breadcrumbs if the current page has ancestors the user may want to return to. Choose Pagination if one long list or result set is split into stable, shareable pages.See the decision
- Breadcrumbs vs StepperChoose Breadcrumbs if pages have ancestors and the user may go up a level. Choose Stepper if a linear process has completed, current, and upcoming stages.See the decision
- Pagination vs StepperChoose Pagination if the pages are equivalent slices of a collection and none must be completed before another. Choose Stepper if a linear process has at least three meaningful stages the user completes in order.See the decision
Trigger or navigate
Does the control trigger an action, change location, or need to remain icon-only?
- Button vs Icon buttonChoose Button if the action is primary or unfamiliar and a visible label prevents misunderstanding. Choose Icon button if a familiar action repeats in a dense toolbar and space matters more than a visible label.See the decision
- Button vs LinkChoose Button if activation changes something here, such as submit, open, or delete. Choose Link if activation takes the user to another page or route that can open in a new tab.See the decision
- Icon button vs LinkChoose Icon button if activation does something in place, such as copy, close, or favorite. Choose Link if activation goes to another page or route, even when only an icon is shown.See the decision
Choices and binary states
Is this an independent value, one exclusive grouped choice, or an on/off setting?
- Checkbox vs Radio groupChoose Checkbox if the user may check zero, one, or several options. Choose Radio group if exactly one option must be selected among visible alternatives.See the decision
- Checkbox vs SwitchChoose Checkbox if the user selects any number of options or agrees to a statement, such as accepting terms. Choose Switch if a single setting is turned on or off, such as notifications or dark mode.See the decision
- Radio group vs SwitchChoose Radio group if the user picks one option among several named alternatives, such as a shipping method. Choose Switch if the only question is whether one setting is on or off.See the decision
Choose from a list
Is the person choosing a native value, filtering by typing, or navigating a list?
- Combobox vs ListboxChoose Combobox if the user types or filters to reach a value and the options appear only on demand. Choose Listbox if the options stay visible on the page or if several may be selected at once.See the decision
- Combobox vs SelectChoose Combobox if the user must filter, type, or browse a popup richer than a closed list. Choose Select if the values are known and few and the native control is enough.See the decision
- Listbox vs SelectChoose Listbox if the options need custom rendering, stay visible, or support multiple selection with keyboard patterns you control. Choose Select if a known set of values fits a plain form field and native behavior is enough.See the decision
Structure and explore data
Should people read tabular data, interact cell by cell, or expand a hierarchy?
- Data grid vs TableChoose Data grid if the user edits, selects, or navigates many cells with the keyboard. Choose Table if the data is read and compared without interaction inside the cells.See the decision
- Data grid vs Tree viewChoose Data grid if the data is tabular and the user edits or navigates many cells efficiently. Choose Tree view if the structure is a real hierarchy, like folders, that the user expands level by level.See the decision
- Table vs Tree viewChoose Table if the user compares values across rows and columns without a parent-child structure. Choose Tree view if items belong to parents and the user drills down through levels.See the decision
Small contextual surfaces
Do you need a short explanation, interactive contextual content, or an action list?
- Dropdown menu vs PopoverChoose Dropdown menu if every item is an action such as Edit or Archive. Choose Popover if the content is explanatory or interactive and not limited to a list of actions.See the decision
- Dropdown menu vs TooltipChoose Dropdown menu if the user must pick an action such as Edit, Duplicate, or Archive. Choose Tooltip if a short text merely explains an icon or control and nothing can be clicked inside it.See the decision
- Popover vs TooltipChoose Popover if the content includes a link, a control, or more than a sentence or two. Choose Tooltip if a few words clarify an unfamiliar icon and losing them on mobile is acceptable.See the decision
Motion & Effects
Does motion explain a change, report state, or only decorate?
- Easing vs Reduced motion and fallbackChoose Easing if you need a fixed-duration pace. Choose Reduced motion and fallback if you need the same result without movement.See the decision
- Easing vs Skeleton shimmerChoose Easing if you need a fixed-duration pace. Choose Skeleton shimmer if you need optional loading decoration.See the decision
- Easing vs Spring animationChoose Easing if you need a fixed-duration pace. Choose Spring animation if you need a damped physical response.See the decision
- Easing vs State transitionChoose Easing if you need a fixed-duration pace. Choose State transition if you need persistent state feedback.See the decision
- Reduced motion and fallback vs Skeleton shimmerChoose Reduced motion and fallback if you need the same result without movement. Choose Skeleton shimmer if you need optional loading decoration.See the decision
- Reduced motion and fallback vs Spring animationChoose Reduced motion and fallback if you need the same result without movement. Choose Spring animation if you need a damped physical response.See the decision
- Reduced motion and fallback vs State transitionChoose Reduced motion and fallback if you need the same result without movement. Choose State transition if you need persistent state feedback.See the decision
- Skeleton shimmer vs Spring animationChoose Skeleton shimmer if you need optional loading decoration. Choose Spring animation if you need a damped physical response.See the decision
- Skeleton shimmer vs State transitionChoose Skeleton shimmer if you need optional loading decoration. Choose State transition if you need persistent state feedback.See the decision
- Spring animation vs State transitionChoose Spring animation if you need a damped physical response. Choose State transition if you need persistent state feedback.See the decision
Wait and track progress
Is duration unknown, measurable, or should the content shape be preserved?
- Progress bar vs SkeletonChoose Progress bar if a task has a reliable completion value, such as an upload in bytes. Choose Skeleton if a page region loads content whose layout is known in advance.See the decision
- Progress bar vs SpinnerChoose Progress bar if you know a reliable value, such as bytes sent or steps completed. Choose Spinner if the operation is short and has no meaningful completion value.See the decision
- Skeleton vs SpinnerChoose Skeleton if the loading region is large and its final shape is predictable, like a card or article. Choose Spinner if the wait is short or the region is small, such as inside a button.See the decision
Enter text
Is the expected value short, multiline, or a search query?
- Search field vs Text fieldChoose Search field if the entered text is a query against a site, catalog, or result set. Choose Text field if the value is a name, email, code, or another short entry kept as data.See the decision
- Search field vs TextareaChoose Search field if the user looks for something and expects results, not storage. Choose Textarea if the user writes a message, note, or description that spans several lines.See the decision
- Text field vs TextareaChoose Text field if the value is a name, email, code, or another short entry. Choose Textarea if the user writes a message, note, or description.See the decision