About this set
Single selects whose options need more than a line of text. Assignee, grouped by team, with avatars sorts people into Suggested, Design and Engineering, gives each a coloured initials avatar and a role, and offers Unassigned with a dashed placeholder. Project picker, grouped by workspace, with icons groups projects under two workspaces with a coloured icon and an open task count. The closed field shows the picked option’s avatar or icon next to its name, copied from the option. Each list is a WAI-ARIA listbox with labelled groups, opened by a select-only combobox: Down, Up, Home and End move, Enter or Space picks, typing a letter jumps to the next matching name, Tab picks the highlighted option and moves on, and Escape closes without changing anything. A hidden select with matching optgroups keeps the value, so the form submits the id, and without JavaScript that native grouped select is shown instead. Use it for assignees, owners, projects, folders or any choice people recognise by picture first.
What’s included
- Labelled option groups inside the listbox
- Avatars and icons copied into the closed field
- Secondary line for role or task count
- Type-ahead that jumps to the next match
- Hidden select with matching optgroups for form submission
Accessibility
The field is a role="combobox" labelled by the visible label; the listbox contains role="group" sections labelled by their headings, and the highlighted option carries aria-selected as the select-only pattern specifies. Avatars and icons are aria-hidden, so each option is read as its name and role. Focus shows a ring and the chevron turn stops under prefers-reduced-motion.
Customise it
Change --rs-accent, --rs-tint and --rs-line on .rs; each avatar or icon takes its colour from --tone in its style attribute. In Tailwind edit the --color-rs-* theme colours.
