## A–Z Index List (S—304)

A contacts-style list with sticky letter headers and a side A–Z rail you can tap or scrub, plus search and multi-select.

- URL: https://sundaeui.dev/components/alpha-index-list
- Category: Navigation & menus · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/alpha-index-list.json`
- Tags: contacts, index, list, scroll, select, a-z

Names are grouped under sticky letter headings. The rail on the right jumps to a letter on tap and follows your finger when you drag down it; letters with no names are dimmed.
Search filters live. Tapping a row toggles selection; the footer counts selected people.

### Usage

```tsx
import { AlphaIndexList } from '@/components/sundae/alpha-index-list'

<AlphaIndexList />
```

### Props

- `names` (`string[]`, required): Items.
- `onSelect` (`(names: string[]) => void`): Called on selection change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Contacts, country pickers, long alphabetical lists on mobile.

### When not to use

- Short lists that fit on screen.

### Accessibility

- Rail letters are buttons; dimmed ones are disabled.
- Rows are checkboxes in a list with group headings.
- Reduced motion removes the movement and keeps every state change.