Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA single-select over thousands of options in groups, virtualised, with the current group heading pinned at the top while you scroll, group-aware keyboard jumps and options whose names include their group. Use this when a long list has sections.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for time zones, cities and files grouped by region or folder, in numbers too large for a normal grouped list, where people still need to see which section they are in.
Do not use it when there are only a few sections and hundreds of rows. A plain grouped list is enough.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| --------------- | ------------------------------------------ | ------- | ------------------------------ | ---------------------------- |
| groups | { label, options: { value, label }[] }[] | - | The sections. |
| value | string \\ | null | - | Selected value (controlled). |
| defaultValue | string \\ | null | null | Initial value. |
| onValueChange | (value: string) => void | - | Runs when an option is chosen. |
| rowHeight | number | 32 | Row height in pixels. |
| visibleRows | number | 8 | Rows in the viewport. |
| aria-label | string | City | Names the control. |
role="presentation", options are role="option" with aria-posinset/aria-setsize counted over options only and a name that starts with the group.aria-activedescendant.aria-hidden and pointer-events-none.The pattern ships with a Testing Library test (virtual-grouped-sticky-headers.test.tsx) that covers flattening, the group in each name, skipping headings, group jumps and the pinned heading.