Skip to content

UI Elements Showcase

How to use this page for testing:

  • All major HTML and UI elements are grouped by category for easy automation and accessibility testing.
  • Each group is a separate component/file for modularity and maintainability.
  • All elements have data-testid attributes for automation (Cypress, Playwright, Selenium, etc.).
  • Test element rendering, interaction, focus, and accessibility—including ARIA, keyboard, and screen reader support.
  • Refer to the accessibility note in each section for best practices.

Input Elements

Button Elements

Select Elements

Checkbox, Radio, and Switch Elements

Link Elements

Media Elements

Example

List Elements

  • Apple
  • Banana
  • Cherry
  1. First
  2. Second
  3. Third
HTML
Markup language for web pages
CSS
Styles for web pages

Table Elements

NameEmailRole
Alicealice@example.comAdmin
Bobbob@example.comUser

Other Elements

60%
0.7
More Info
This is additional information inside a details/summary element.
“This is a blockquote example.”

Modal/Dialog Elements

Accessible modal with role="dialog", aria-modal, and keyboard focus trap.

Tooltip/Popover Elements

Accessible tooltip with role="tooltip" and keyboard focus support.

Alert/Toast Elements

Accessible alert with role="alert" and focus management for toasts.

Accordion/Collapse Elements

Accessible accordion with aria-expanded and keyboard navigation.

Tabs Elements

Accessible tabs with role="tablist", role="tab", aria-selected, and keyboard navigation.
Content for Tab One.

Pagination Elements

Accessible pagination with aria-label="Pagination" and keyboard navigation.
Current Page: 1

Spinner/Loader Elements

Accessible spinner with role="status" and aria-live for screen readers.

Breadcrumb Elements

Accessible breadcrumbs with aria-label="Breadcrumb" and aria-current for current page.

Avatar & Badge Elements

Avatars should have alt text for accessibility. Badges should have clear labels.
Profile of John DoeAvatar
NewBadge

Stepper/Progress Wizard

Accessible stepper with aria-current and clear step indicators.
1
2
3
Account Info

Slider (Range) Elements

Accessible slider with aria-valuenow, aria-valuemin, aria-valuemax, and aria-label.
50

Rating Elements

Accessible rating widget with role="radiogroup" and keyboard navigation.
Rating: 3 / 5

Calendar/Date Picker

Accessible native date picker. For advanced use, ensure keyboard and screen reader support.

Time Picker

Accessible native time picker. For advanced use, ensure keyboard and screen reader support.

File Uploader (Drag & Drop)

Accessible drag & drop area with keyboard and screen reader support. Use aria-label and tabIndex.
Drag and drop a file here, or click to select

Rich Text Editor (Mock)

Accessible contenteditable area. Use role="textbox", aria-multiline, and ensure keyboard navigation.
Type here with formatting!

Carousel/Slider

Accessible carousel with aria-roledescription="carousel", aria-label, and keyboard navigation.
Slide 1

Chip/Tag Input

Accessible tag input with keyboard navigation and clear labels.
ReactUI

Tree View

Accessible tree view with aria-expanded and keyboard navigation.

Timeline

Accessible timeline with clear labels and chronological order.
  1. Started project
  2. First release
  3. Major update

Color Picker

Accessible color picker. For advanced use, provide text alternatives and contrast guidance.
#2563eb

Code Block/Copy-to-Clipboard

Accessible code block with tabIndex and copy button.
function greet(name) {
  return "Hello, " + name + "!";
}

Split Button/Dropdown Button

Accessible split button with aria-haspopup, aria-expanded, and keyboard navigation.

Menu/Dropdown Menu

Accessible dropdown menu with aria-haspopup, aria-expanded, and keyboard navigation.

Notification Banner

Accessible notification banner with role="status" and dismiss action.
Success!Your changes have been saved.

Search/Autocomplete

Accessible autocomplete with aria-autocomplete, aria-controls, aria-activedescendant, and keyboard navigation.

Breadcrumbs (with Dropdowns)

Accessible breadcrumbs with dropdown for sub-navigation. Use aria-current and aria-haspopup.

Image Gallery / Lightbox

Accessible gallery with modal lightbox. Use role="dialog", aria-modal, and keyboard navigation.