UIDex

A visual dictionary

Web

38

Infinite Scroll

التمرير اللانهائيWeb
IntersectionObserver

The list that refills itself. Every time you reach the bottom, ten more arrive and the footer moves further away.

Scrollspy

متتبّع التمريرWeb
IntersectionObserver

The list beside the article, with one link lit up on whatever section you have scrolled to.

text-overflow: ellipsis

The long name that gets cut and leaves a "…" behind, with the rest still reachable somewhere.

Segmented Control

الشريط المقسّمWeb
role="radiogroup"

The joined row of buttons where one stays lit, and the highlight slides over to whichever you press.

Carousel

الشريط الدوّارWeb
aria-roledescription="carousel"

The strip that flips through banners with two arrows and a row of dots. Most people only ever see the first slide.

Popover

اللوحة المنبثقةWeb
popover="auto" + role="dialog"

The small box that opens next to a button, holds things you can press, and closes the moment you click outside.

Command Palette

لوحة الأوامرWeb
role="dialog" + role="combobox"

Hit Cmd+K, type the name of what you want, and it runs before you have found the menu it lives in.

Menu (Dropdown Menu and Context Menu)

قائمة الأوامرWeb
role="menu" + role="menuitem"

The panel that opens from a three dot button or a right click, where every row runs a command and then it closes itself.

Site Header and Navbar

ترويسة الموقع وشريط التنقّلWeb
<header> + <nav>

The strip across the top of every page: logo at one end, section links beside it, search and account at the other end.

Sidebar

الشريط الجانبيWeb
<aside> / <nav>

The column down the side of an app that holds every page, and stays put wherever you go.

Divider

الخطّ الفاصلWeb
<hr> / role="separator"

One thin line carrying three different meanings. Your eye cannot tell them apart; the accessibility tree can.

Card

البطاقةWeb
<article>

The box with a picture, a title, two lines of text, and a button. Everyone just calls it a card.

Data Table

جدول البياناتWeb
<table> + <th scope>

Rows and columns that let you compare numbers straight down a line, with a header you press to re-sort.

Avatar and Avatar Group

الصورة الرمزية ومجموعتهاWeb
<img alt> / AvatarGroup

The little circle with a photo in it, and your initials when there is no photo.

Alert

التنبيهWeb
role="alert"

The message that keeps its place in the page and never leaves on its own, either beside the field or as a strip across the top.

Badge

الشارةWeb
role="status" / badgeContent

The small number parked on the corner of an icon. You cannot press it, you press the icon.

Progress Bar vs Spinner vs Ring

مؤشّر التقدّمWeb
role="progressbar"

The bar tells you how far along you are. The spinner only tells you to wait.

File Upload / Dropzone

رفع الملفاتWeb
<input type="file">

Press it and your computer opens its own file window, or drag the file straight in from the desktop.

Combobox / Autocomplete

حقل الإكمال التلقائيWeb
role="combobox"

Type two letters and the list underneath shrinks until the thing you wanted is the only one left.

Text Input

حقل النصWeb
<input type="text">

The box you type your name into. The plainest thing on the page, and the one with the most parts nobody can name.

Slider

المنزلقWeb
<input type="range">

The line with a handle you drag, and the number moves with your finger.

Radio Group

مجموعة أزرار الاختيارWeb
role="radiogroup"

The row of little circles where picking one empties the one you picked before.

Checkbox

مربّع الاختيارWeb
<input type="checkbox">

The little square you tick. Check as many as you want, and none of them cancels another.

Form Field

حقل النموذجWeb
<label for>

The label on top, the small line underneath, and the error text. One unit, and every piece has its own job.

Drawer / Side Panel

الدرج الجانبيWeb
role="dialog" / inset-inline-start

The panel that slides in from one edge and leaves the page still showing behind it.

Empty State

الحالة الفارغةWeb
<Empty> / noRowsOverlay

The screen you land on when there is nothing to show. It still has to tell you what to do next.

Chip / Tag

الشريحةWeb
<button> / role="option"

The little capsule you press to filter by. The × on its edge removes it.

Switch / Toggle

مفتاح التبديلWeb
role="switch"

The little switch that takes effect the moment you press it. There is no Save button and nothing to wait for.

Pagination

ترقيم الصفحاتWeb
<nav aria-label="pagination">

The row of numbers under the results. Unlike infinite scroll, page 7 has a link you can send.

Modal Dialog

النافذة الحواريةWeb
role="dialog" aria-modal="true"

The window that dims the page behind it and will not let you past until you answer.

Dropdown / Select

القائمة المنسدلةWeb
<select> / role="listbox"

The box with the little down arrow that opens a list so you pick one thing.

Tooltip

التلميحWeb
role="tooltip" + aria-describedby

The small bubble that appears when you rest the pointer on an icon and tells you what it does.

Tabs

التبويباتWeb
role="tablist"

The row of labels you click to swap the panel underneath, without leaving the page.

Steps / Stepper

مؤشّر الخطواتWeb
aria-current="step"

The row of numbered circles above a form that tells you which step you are on and how many are left.

Skeleton

هيكل التحميلWeb
aria-busy="true"

The grey outline of the page that shows before the data lands, with a light that sweeps across it.

Accordion

الأقسام المطويةWeb
aria-expanded + aria-controls

A stack of headers. Press one and its panel opens underneath, and the one that was open usually closes.

Toast

الإشعار العائمWeb
role="status"

The small box that slides into a corner, says "Saved", then disappears on its own.

Breadcrumbs

مسار التنقّلWeb
aria-current="page"

The small row of links above the title that tells you where you are in the site.