Default
Showing contacts from A
IndexScrubber
An A to Z jump strip beside a long alphabetical list (contacts, countries). One 44px-wide target; dragging shows the letter in a bubble.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Slider (vertical): Up and Down move a letter, Home and End go to the first and last
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Section letters only
Show the codeHide the code
Section letters only, code
<IndexScrubber letters={['A', 'B', 'D', 'G', 'M', 'S', 'Z']} />Tokens
The 9 design tokens IndexScrubber reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 9 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.inverse | … | --sd-color-bg-inverse |
| color.bg.muted | … | --sd-color-bg-muted |
| color.text.brand | … | --sd-color-text-brand |
| color.text.default | … | --sd-color-text-default |
| color.text.inverse | … | --sd-color-text-inverse |
| elevation.2 | … | --sd-elevation-2 |
| radius.full | … | --sd-radius-full |
| spacing.inset.xs | … | --sd-spacing-inset-xs |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/index-scrubberThen import it
import { IndexScrubber } from "@/components/ui/index-scrubber"Props
| Prop | Type | What it does |
|---|---|---|
letters | string[]Default [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', '#'] | The index entries, top to bottom: usually the list's section letters. Default A to Z and #. |
onChange | (letter: string) => void | The letter to jump to, each time it changes (dragging, or the arrow keys). |
aria-label | stringDefault 'Jump to letter' | Accessible name. Default "Jump to letter". |
className | string |
When to use it
Use it for
- Long alphabetical lists with section headings (contacts, countries, an index)
Use something else for
- Short lists that fit on two screens
- Lists that are not alphabetical: use SearchField
Accessibility
Screen readers announce "Jump to letter, A, slider".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Scroll the list to the section on onChange, and keep the section headings (headings are the main way to move for keyboard and screen reader users)
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 405 text runs: 0 below 7:1, lowest 8.4:1 |
| Target size | 14 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the strip, on the first letter |
| ArrowDown | Down Arrow moves to the next letter |
| ArrowUp | Up Arrow moves to the letter above |
| End | End goes to the last letter |
| Home | Home goes to the first letter |
In Figma
The Figma component is IndexScrubber, with State (Default, Dragging, Focus). The Figma library isn’t published yet.
Figma to code: State (Default, Dragging, Focus; preview only).