Season Selector
ProControl for switching between competition seasons or years. Available as a dropdown (native <select>) or segmented control. Used at the top of league tables, fixture lists, and statistics pages to scope data to a specific season.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Dropdown | Native select dropdown listing available seasons. | Use when there are more than 4 seasons or when vertical space is limited. |
| Segmented | Segmented control with season options as pill buttons. | Use when there are 2-4 seasons and horizontal space allows it. |
Usage Guidelines
Do
Use consistent season format throughout the application (e.g., "2024/25" or "2024-2025").
Don't
Mix season formats (e.g., "2024/25" on one page and "2024-2025" on another).
Do
Indicate the current/active season with aria-current.
Don't
Force a page reload on season change — update data in-place.
Do
Default to the current or most recent season on page load.
Don't
Remove older seasons from the selector without providing an archive link.
Code
Design Tokens
Accessibility
- Dropdown uses a visible or screen-reader-only label.
- Current season indicated with aria-current on the selected option.
- Segmented variant uses radiogroup pattern with aria-label.