Technical translation
From concept to implementation
A projection generated from the published ontology: HTML element, ARIA pattern, Radix primitive, shadcn recipe, and verification source.
41 of 41 mappings
| Concept | HTML | ARIA | Radix | shadcn/ui | Evidence |
|---|---|---|---|---|---|
| Tooltipradix | — | tooltip | Tooltip | Tooltip | Verified |
| Popoverradix | — | nonmodal dialog when interactive content requires it | Popover | Popover | Verified |
| Dropdown menuradix | — | menu | Dropdown Menu | Dropdown Menu | Verified |
| Modal dialogradix | — | dialog | Dialog | Dialog | Verified |
| Alert dialogradix | — | alertdialog | Alert Dialog | Alert Dialog | Verified |
| Lightboxshadcn-radix | — | dialog | Dialog | Dialog with figure viewer | Verified |
| Drawershadcn-radix | — | dialog | Dialog | Sheet | Verified |
| Bottom sheetspecialized | — | dialog when modal | — | Drawer (Radix backend) | Exception |
| Sidebarcustom | aside with nav | complementary or navigation region | — | — | Exception |
| Selectnative | select | native select | — | — | Verified |
| Comboboxshadcn-base | input | combobox with listbox popup | — | Combobox (Base UI backend) | Exception |
| Listboxnative | select[size] | listbox | — | — | Verified |
| Checkboxnative | input[type=checkbox] | checkbox | — | — | Verified |
| Radio groupnative | fieldset with input[type=radio] | radiogroup | — | — | Verified |
| Switchradix | — | switch | Switch | Switch | Verified |
| Tabsradix | — | tabs | Tabs | Tabs | Verified |
| Segmented controlnative | fieldset with input[type=radio] | radiogroup | — | — | Verified |
| Accordionradix | — | disclosure buttons with aria-expanded | Accordion | Accordion | Verified |
| Toastradix | — | status or alert according to urgency | Toast | Toast | Verified |
| Inline alertcustom | div or section | status, alert, or no live role according to urgency | — | — | Exception |
| Bannercustom | section or aside with an accessible name | named region | — | — | Exception |
| Spinnercustom | status text plus decorative indicator | status and aria-busy on the updated region | — | — | Exception |
| Progress barnative | progress | progressbar | — | — | Verified |
| Skeletoncustom | decorative blocks | aria-busy on the content region | — | — | Exception |
| Buttonnative | button[type=button|submit|reset] | button | — | — | Verified |
| Linknative | a[href] | link | — | — | Verified |
| Icon buttonnative | button[type=button] with accessible name | button | — | — | Verified |
| Text fieldnative | label with input | textbox | — | — | Verified |
| Textareanative | label with textarea | textbox | — | — | Verified |
| Search fieldnative | form[role=search] with input[type=search] | search landmark and searchbox | — | — | Verified |
| Breadcrumbscustom | nav with ol and a[href] | breadcrumb navigation landmark with aria-current=page | — | — | Exception |
| Paginationcustom | nav with ul and a[href] | named pagination navigation with aria-current=page | — | — | Exception |
| Steppercustom | ol with status text and optional a[href] | ordered process stages with aria-current=step or true | — | — | Exception |
| Tablenative | table with caption, th[scope], and td | native table | — | — | Verified |
| Data gridcustom | div or table with managed cell focus | grid with row, columnheader, rowheader, and gridcell | — | — | Exception |
| Tree viewcustom | nested elements with managed item focus | tree with treeitem and group | — | — | Exception |
| Easingcustom | button, label, select, input[type=checkbox] and decorative div | native controls and status text | — | — | Exception |
| Spring animationcustom | button, label, select, input[type=checkbox] and decorative div | native controls and status text | — | — | Exception |
| State transitioncustom | button, label, select, input[type=checkbox] and decorative div | native controls and status text | — | — | Exception |
| Skeleton shimmercustom | button, label, select, input[type=checkbox] and decorative div | native controls and status text | — | — | Exception |
| Reduced motion and fallbackcustom | button, label, input[type=checkbox] and decorative div | native controls and status text | — | — | Exception |