Loading…

Assignee Picker

beta

A pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.

Forms
2 files
1 npm package
Accessibility notes

Playground

Installation

The CLI installs avatar and popover as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add assignee-picker

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { AssigneePicker } from "@/components/ui/assignee-picker";

Examples

Every example the tests run, live and operable, side by side.

Default
Unassigned
Grid Stack
Photos
Overflow
Controlled
Right To Left
Gallery

API

Generated from the component's own types, so a prop cannot appear here without existing.

<AssigneePicker>

Prop	Type	Default
`people` (required)	`AssigneePickerPerson[]`	—
`contentClassName`	`string`	—
`contentWidth` Width of the card. Numbers are pixels.	`number \| string`	`264`
`corner` Radius of the pill and card in pixels. Rows take a concentric radius.	`number`	`22`
`defaultOpen`	`boolean`	`false`
`defaultValue`	`string[]`	—
`label` Names the listbox and prefixes the trigger's name ("Assignees: Adam Marsh").	`string`	`"Assignees"`
`maxFaces` Most slots in the stack; beyond it the last slot becomes "+N".	`number`	—
`onOpenChange`	`(open: boolean) => void`	—
`onValueChange`	`(value: string[]) => void`	—
`open`	`boolean`	—
`overlap` Pixels each face overlaps the previous one in a `row` stack (0–22).	`number`	`10`
`placeholder` Shown in the pill, and in its name, when nobody is assigned.	`string`	`"Unassigned"`
`stack` `row` overlaps the faces; `grid` packs up to four into a 2×2 square.	`"row" \| "grid"`	`"row"`
`stroke`	`boolean`	—
`tone`	`"default" \| "inverted"`	`"default"`
`triggerClassName`	`string`	—
`value` Controlled selection, as person ids in the order they were assigned.	`string[]`	—

Plus every attribute of <div> except defaultValue, onChange, children.

Accessibility

The trigger exposes aria-haspopup="listbox" and aria-expanded, and is named by `label` plus who is assigned ("Assignees: Adam Marsh, Priya Raman", or the placeholder when nobody is). The popup is a role="listbox" aria-multiselectable="true" named by `label`, with role="option" rows carrying aria-selected. Opening moves focus onto the first assigned person (or the first row); ArrowUp/ArrowDown rove with wrap-around, Home/End jump, Space/Enter toggle, and Escape or Tab close it and return focus to the trigger. Faces, avatars and the check marks are aria-hidden: the option text and aria-selected carry the meaning. Under reduced motion the card, rows and faces appear in place.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

people

AssigneePickerPerson[]

—

contentClassName

string

—

contentWidth

Width of the card. Numbers are pixels.

number | string

264

corner

Radius of the pill and card in pixels. Rows take a concentric radius.

number

22

defaultOpen

boolean

false

defaultValue

string[]

—

label

Names the listbox and prefixes the trigger's name ("Assignees: Adam Marsh").

string

"Assignees"

maxFaces

Most slots in the stack; beyond it the last slot becomes "+N".

number

—

onOpenChange

(open: boolean) => void

—

onValueChange

(value: string[]) => void

—

open

boolean

—

overlap

Pixels each face overlaps the previous one in a row stack (0–22).

number

10

placeholder

Shown in the pill, and in its name, when nobody is assigned.

string

"Unassigned"

stack

row overlaps the faces; grid packs up to four into a 2×2 square.

"row" | "grid"

"row"

stroke

boolean

—

tone

"default" | "inverted"

"default"

triggerClassName

string

—

value

Controlled selection, as person ids in the order they were assigned.

string[]

—