> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/page-control.md).
# Page Control
Page controls are used for navigating between multiple pages or sections within a carousel or paginated view. They typically display a series of dots or indicators representing the number of pages.
## Overview
Page controls enable quick navigation between sequential sections or views in paginated or carousel interfaces. They serve as a visual indicator, showing the number of pages and the current active one.
{% embed url="" %}
## When to use
* Page controls are often used in mobile or tablet interfaces to allow swipe-based navigation between views.
* Use page controls to allow users to navigate between pages in a multi-page carousel or content section.
* Ideal when users need to view multiple sections of content without scrolling, such as image galleries.
* For onboarding flows or multi-step wizards, page controls can visually track user progress.
* When space is limited, page controls provide a compact solution for navigating content.
## When not to use
* Do not use page controls if the number of pages exceeds a reasonable limit (more than 10), as they can become cluttered.
* If each page requires detailed contextual information, use a different form of navigation to provide more clarity.
* If the content doesn't require user interaction or page switching, page controls may not be necessary.
* If you have enough space for more detailed navigation elements, such as a tab bar or buttons, page controls may not be the best choice.
## Types
## Anatomy
1. **Active Dot:** The current page or section is indicated by a highlighted dot, differently colored for emphasis.
2. **Inactive Dot:** Represents the other available pages or sections, dimmed to distinguish from the active page.
3. **Container:** The outer structure that holds all the page control indicators.
## Styles
## States
## Size
| Size | Dot (px) | Container Height (px) |
| ------- | -------- | --------------------- |
| Default | 8 | 24 |
| Large | 10 | 34 |
## Accessibility
* **Keyboard Navigation:** Ensure that users can navigate between pages using keyboard input, such as arrow keys or tabbing through the indicators.
* **Screen Reader Support:** Each page control indicator should be labeled for screen readers, indicating the current page and the total number of pages.
* **Responsive Design:** The page control should adapt to different screen sizes to maintain clear visibility on both desktop and mobile devices.
* **High Contrast for Visibility:** Ensure that active and inactive dots have enough contrast for easy differentiation by users with visual impairments.
* **Size and Spacing:** Make sure the dots are large enough to tap or click comfortably, with appropriate spacing for touch devices.
## Example
* **Image Carousel:** For a product gallery, page controls can be used to switch between different product images.
* **Onboarding Flow:** In a step-by-step onboarding process, page controls can represent the user’s progress through the steps.
* **Mobile App Sliders:** Page controls are often used in mobile app sliders for users to swipe between different content sections.
* **Tutorial Screens:** In an app tutorial, use page controls to guide users through the various instructional slides.
