UIDex

What is this thing called?

You can see the element but you cannot name it, so you cannot search for it and you cannot ask an agent to build it. Describe it in your own sloppy words. You get the real name in Arabic and English, the symbol it carries in code, and a prompt you can paste straight into your coding agent.

Search understands Arabic in any spelling, and Franco-Arabic too. Type "zorar" or "shreet el ta2adom".

Intro video goes here

Identification key

You cannot name it. That is normal. Answer what you can see in front of you and the list below narrows on its own.

Where does it sit?
How does it go away?
What is it for?
Or browse the whole catalogue below

Swipe Actions

إجراءات السحبMobile
.swipeActions / ItemTouchHelper

Drag a row sideways and buttons you never knew were there slide out from under it.

Floating Action Button

زرّ الإجراء العائمMobile
FloatingActionButton

The circle parked over the content in one corner of the screen, usually a plus that starts something new.

Pull to Refresh

السحب للتحديثMobile
SwipeRefreshLayout / .refreshable

You drag the list down a little and let go, and a spinner brings in whatever is new. There is no button; you have to already know it is there.

Action Sheet

ورقة الإجراءاتMobile
UIAlertController .actionSheet

The short list of commands that rises from the bottom edge, red delete at the top and cancel sitting on its own at the bottom.

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.

Bottom Sheet

الورقة السفليةMobile
BottomSheetDialog / .presentationDetents

The panel that comes up from the bottom edge and parks halfway. Flick it back down and it goes away.

Tab Bar / Bottom Navigation

شريط التنقّل السفليMobile
TabView / NavigationBar

The strip of icons glued to the bottom of a phone app. Each one is a whole section that remembers where you left it.

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.

Every element ships an RTL section

What mirrors when the page flips right-to-left, what must never mirror, and which logical CSS property to use instead of left and right. This is the knowledge Arabic-market developers rediscover by hand, every single day.

RTL guide