Level 4 · Complex Components
Composite widgets
Tabs, accordions, modals — the day-to-day UI patterns your framework must handle robustly.
#
Tabs
Overview content — practice reading only the ACTIVE tab.
#
Accordion
tipOnly one panel open at a time (single mode).
#
Modal (dialog)
tipBody scroll should be locked while the modal is open.
#
Tooltip
tipRadix appends the tooltip to a portal — search globally.
#
Pagination
- Row #1
- Row #2
- Row #3
- Row #4
- Row #5
page 1 / 6
#
Carousel
slide 1 of 3
Test smart, not hard
Locators built on data-testid outperform CSS or XPath every time.
tipAdvance with buttons; only the active slide is rendered.
#
Stepper
1Account/
2Profile/
3Confirm
Step 1 — enter your email & password.
tipComplete each step to enable Next.