Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Dialog Multi Select Picker

ProNew

Pick several items from a longer list: a search field narrows the list while ticks persist, Select all and Clear act on what is shown, the count is announced and Apply commits.

Customize

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.

title

Guide and examples

When to use it

Use this to choose teams, tags or categories from lists of ten to a few hundred items when a dropdown would be cramped.

Do not use it for fewer than six options (use checkboxes inline) or for server-side searches over huge lists.

Installation

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.

Log in Get Pro for $35

Props

DialogMultiSelectPicker

Prop	Type	Default	Description
`trigger`	`ReactNode`	-	Opens the dialog.
`title`	`string`	-	Dialog title.
`options`	`{ value, label }[]`	-	Choices.
`selected`	`string[]`	-	Applied values.
`onApply`	`(selected: string[]) => void`	-	Called with the draft on Apply.

Accessibility

The count ("2 selected") is a polite status and also appears on Apply ("Apply (2)").
Select all shown and Clear shown only touch visible rows, so a filtered list never changes hidden choices.
Cancelling or closing restores the applied selection the next time it opens.

Keyboard

Key	Action
Type in Search	narrows the list
Space	ticks an item
Enter on Apply	commits
Escape or Cancel	discards the draft

Testing

The pattern ships a Testing Library test (dialog-multi-select-picker.test.tsx) that covers the starting selection, searching with kept ticks, bulk actions on shown rows, applying and cancelling.