Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA project picker that lists your recent projects first, keeps the rest below and shows archived ones as unavailable. Use this when people switch between a few projects out of many.
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 in headers, filters and forms where a person works in two or three projects most of the day. The most recently used ones are one key press away, and picking a project moves it to the front.
Do not use it when there are fewer than six projects. A plain list or tabs are quicker.
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 |
|---|---|---|---|
projects | { id, name, color?, archived? }[] | - | All projects. |
value | string | - | Selected project id (controlled). |
defaultValue | string | - | Initial project id. |
onValueChange | (id: string) => void | - | Runs when a project is picked. |
recentIds | string[] | [] | Most recently used ids, newest first (controlled). |
onRecentChange | (ids: string[]) => void | - | Runs with the new order after a pick. |
maxRecent | number | 3 | How many recent projects to list. |
combobox; its name is the project name.Recent, All projects and Archived.aria-disabled and end with the word archived in text.The pattern ships with a Testing Library test (project-picker-recent.test.tsx) that covers recent ordering, moving a picked project to the front, search hiding the Recent group and archived projects being unavailable.