People Input

Install

pnpm dlx shadcn@latest add @vegastack/people-input

Usage

import {
  PeopleInput,
  type PeopleInputOption,
} from "@/components/ui/people-input";

const [invitees, setInvitees] = React.useState<PeopleInputOption[]>([]);

<PeopleInput
  value={invitees}
  onValueChange={setInvitees}
  search={(query, { signal }) => searchDirectory(query, signal)}
/>;

"Add people or teams…": type, and the host's search(query) returns matching people and teams (debounced, and race-safe through useAsyncSearch — a slow answer never overwrites a newer one). Each row is a PersonOption over a PersonAvatar; a team (kind: "team") shows its rounded-square tile. A pick becomes a chip with a remove button, and Backspace in the empty field removes the last chip. A chip has no access level of its own — a share invite picks one level for the whole batch.

Scope

• Owns: the chips field, the search state (debounce, abort, loading, empty, error), the person and team rows and chips.
• Does not own: the directory or who may be added — search returns only addable people and teams.
• Compose with: PermissionMenu for the batch's level and share-01 for the whole dialog.

Examples

Chosen people and teams

A team chip carries the team icon; a person chip the person icon.

Disabled and no results

disabled while an invite sends; emptyText when a search finds nobody.

API Reference

PeopleInputOption

A Person (from person-avatar) with a stable id; kind: "team" draws it as a team.

Accessibility

• The text input is an editable combobox named "Add people or teams" (override with aria-label, or label it with a <label htmlFor={id}>); the list is a named multi-select listbox.
• Each chip's remove button is named Remove {name} (removeLabel).
• "Searching…" and errors are announced through the combobox's own polite status region.
• The popup portals above a Dialog or a bottom Sheet and is never clipped by them.

Do / Don't