UI Components

Button

The most-tapped component in any app. Learn the emphasis levels, the six states every button has, and the bugs that create double orders and endless spinners.

Text Field

The box where users type names, emails, passwords and messages. Learn its parts, the keyboards it opens, when errors should appear, and the inputs that break it.

Dropdown / Select

A compact control that hides a list of options until you open it. Learn the native and custom variants, when a dropdown is the wrong choice, and the bugs testers find in long lists and dependent fields.

Toggle Switch

A two-state control that turns a setting on or off immediately. Learn when to use it instead of a checkbox, how it saves to the server, and how testers catch switches that lie.

Date & Time Picker

Calendars, wheels and typed fields for choosing dates and times. Learn the variants, when a picker is overkill, and how locales, time zones and leap years break them.

Checkbox

The little box you tick to agree, pick several items or select a whole list at once. Learn its states (including "mixed"), when it beats a switch or a radio button, and the consent and keyboard bugs testers find in it.

Radio Button

A group of round options where exactly one can be chosen, like Standard or Express delivery. Learn when to use it instead of a dropdown, checkbox or segmented control, when to preselect, how the keyboard should work, and the grouping bugs testers find.

Slider

A thumb you drag along a track to pick a value or a range. Learn continuous vs discrete and single vs range sliders, when a slider is the wrong tool, and the boundary, rounding and accessibility bugs testers find in them.

Search Bar

The field at the top of the screen that finds things. Learn the iOS, Material and web versions, how focus, the keyboard, suggestions, clear and cancel should behave, and the bugs testers find in the field itself.

Chips / Tags

Small rounded elements that filter a list, hold things you typed or suggest an action. Learn the four Material chip types, chips vs tags vs checkboxes, and the overflow, color-only and remove bugs testers find in them.

Stepper (+/−)

Two buttons and a number in between, for small exact quantities. Learn limits and steps, typing into the value, long-press, the quirks of the web's number input, and the network and accessibility bugs testers find in cart steppers.

Password Field

The masked text field where people type, paste or autofill a secret. Learn show/hide, password managers and autofill, rules vs strength meters, and the truncation, paste and accessibility bugs that lock real users out.

Autocomplete

A text field that suggests options while you type. Learn the combobox pattern, list vs inline completion, free text vs must-pick fields, and the timing, matching and keyboard bugs testers find in address and city pickers.

File Upload

The button, drop zone and file list that send documents to a server. Learn native file inputs, drag and drop, mobile document pickers and per-file progress, and the type, size, file name and partial-failure bugs testers find in every upload.

Segmented Control

A row of two to five connected buttons where exactly one is selected. Here's what it looks like, when it's the right choice, and how testers break it.

Tabs

A row of labels that switches between sibling sections of one screen. Learn the Android, iOS and web variants, how swiping, badges, deep links and Back should behave, and the state bugs testers find every sprint.

Navigation Bar

The bars at the top and bottom of almost every app screen. Learn iOS navigation and tab bars, Material top app bars and bottom navigation, web headers, safe areas and scroll behavior, and the back button, title and badge bugs testers find in them.

Drawer / Hamburger Menu

A panel of destinations that slides in from the side, usually opened with the ☰ button. Learn modal and standard drawers, the hamburger debate, edge swipes vs back swipes, and the focus, scroll and "still open" bugs testers find in them.

Pagination

Splits a long list into pages with Prev, Next and page numbers. Learn numbered pages vs "Load more" vs infinite scroll, why the page belongs in the URL, and the boundary bugs hiding on page 1, the last page and page 999.

Breadcrumbs

The small "Home › Camping › Tents" trail above a page title. Learn location-based vs path-based breadcrumbs, the right markup, collapsing on small screens, and the stale-path, 404 and screen reader bugs testers find in them.

Wizard / Stepper

A long task split into steps with a progress indicator, like Contact › Shipping › Payment › Review. Learn when to use steps, linear vs non-linear flows, validation, Back, drafts and URLs per step, and the data-loss bugs testers find in checkouts and bookings.

Modal

A window that sits on top of the screen and blocks everything else until you answer it. Learn the platform variants, the many ways to close one, and the focus, scroll and data-loss bugs testers find every week.

Toast / Snackbar

A short message that pops up, says what just happened, and disappears on its own. Learn the Android, iOS and web versions, how long they should stay, the Undo pattern, and the timing and stacking bugs testers find.

Bottom Sheet

A panel that slides up from the bottom of the screen. Learn modal and standard sheets, detents and drag handles, every way to dismiss one, and the scroll, keyboard and lost-choice bugs testers find in them.

Empty & Error States

What a screen shows when there's nothing to show, or when something failed. Learn the six types, what a good one says, how testers force them with fresh accounts, airplane mode and proxy tools, and the spinner, flash and Retry bugs they find.

Tooltip

A small text bubble that explains a control on hover, focus or long-press. Learn why touch screens have no hover, the WCAG rules for content on hover or focus, edge collisions, and why an icon button still needs its own name.

Badge

The little red number on a tab, the dot on an avatar, the "Sale" label on a product. Learn count, dot and status badges, app icon badges on iOS and Android, and the zero, overflow, stale count and accessibility bugs testers find in them.

Progress & Spinners

Spinners and progress bars tell people the app is working and how long it will take. Learn determinate vs indeterminate, when to show them (and when not), why long work needs Cancel, and the flashing, lying and never-ending indicators testers find.

Card

A box that groups a photo, a title, a few facts and maybe an action about one thing, like a product, a restaurant or an article. Learn the types, the one-link-per-card pattern, and the grid, price and tap bugs testers find.

List with Swipe Actions

List rows that reveal buttons like Archive or Delete when you swipe them. Learn the anatomy, leading vs trailing actions, full swipe, Undo vs confirmation, the alternatives every swipe needs, and the state bugs testers find in these rows.

Accordion

Stacked sections that open and close to show more detail. Learn single vs multiple open, deep links, find-in-page, scroll jumps and the screen reader states that testers check on every FAQ and order page.

Pull to Refresh

Drag a list down from the top and let go to load the newest items. Learn when it fits, how threshold, resistance and spinner states work, what should happen on errors and offline, and how testers break it.

Carousel

A strip of slides you swipe or click through, from rotating hero banners to product photo galleries. Learn when carousels work, the autoplay and accessibility rules, and the swipe, dot and loading bugs testers find in almost every one.

Infinite Scroll

New items load by themselves as you reach the bottom of a list. Learn how the sentinel, prefetch distance and cursors work, what the loading, error and end states must look like, and how testers find duplicates, lost positions, unreachable footers and keyboard traps.

Image Gallery

A grid of photo thumbnails that opens a full-screen viewer (lightbox). Learn how thumbnails and full-size images should load, how swiping, zooming and closing should behave, and the focus, counter and data bugs testers find in almost every gallery.