Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select with labelled groups and a decorative icon per option, for choices that fall into families such as file types.
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 this for export formats, integrations, regions and other lists where grouping shortens the scan.
Do not use groups for fewer than six options, or icons that do not add meaning.
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 |
|---|---|---|---|
label | string | - | Visible label. |
groups | { label, options: { value, label, icon }[] }[] | - | Groups of options. |
value / onValueChange | string / fn | - | Controlled value. |
role="group" elements named by their label, with a separator between them.aria-hidden; each option is named by its text only.| Key | Action |
|---|---|
| Enter or Space | opens the list |
| Arrow keys | move across groups |
| Type | jumps to a matching option |
The pattern ships a Testing Library test (select-grouped-icons.test.tsx) that covers labelled groups, option names, choosing across groups and typeahead.