Skip to content
v2.5.0
English
Русский
Documentation

PageControl

PageControl is a compound component for short page or step indicators, usually in carousels and onboarding flows.
StorybookSourceFigma

Labeling

  • The surrounding UI should explain what the items represent, especially in carousels and onboarding flows.

Keyboard Behavior

AnnouncementFocus the demo and press a key from the table.
KeyAction
→←Activates and focuses the next or previous item. Stops at the first and last item. The keys do not follow the text direction: → always moves to the next index, also in right-to-left.
TabMoves the focus to the active item and then out of the control: the items are one tab stop.
Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.

Focus Behavior

  • Each item is a focusable button-like control with roving tabIndex.

Screen Reader Semantics

  • The root uses role='tablist'.
  • Items expose tab-like semantics and active selection.
  • Progress items may expose meter semantics while active.

Form Semantics

  • PageControl is navigation, not form input.

Accessibility Risks

  • no contextual label for what the dots represent
  • relying only on color to show the active item
  • timed progress indicators that change faster than users can process