Bulk ID Paste Matcher

ProNew

A bulk add box: paste IDs, SKUs or names from a spreadsheet, see how many matched and exactly which did not, then add the matches. Use this when people select dozens of known items at once.

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.

noun

Guide and examples

When to use it

Use it for adding many known records at once: SKUs to an order, user IDs to a group, emails to an audience, where checking a list one by one is the real cost.

Do not use it when people are choosing items they have not decided yet. Use a searchable multi-select.

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.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	What the pasted text is matched against (by value or label, ignoring case).
`value`	`string[]`	-	Matched, added values (controlled).
`defaultValue`	`string[]`	`[]`	Initial values.
`onValueChange`	`(value: string[]) => void`	-	Runs when matches are added or removed.
`noun`	`string`	`items`	Word used in labels.
`onUnmatched`	`(values: string[]) => void`	-	Runs with the values that matched nothing.

Accessibility

The textarea has a visible label and a description of the accepted separators.
After pressing Add matches a role="status" line reads the counts and the unmatched values stay in the box so they can be corrected.
Added items are chips with Remove buttons named after the item.
Matching ignores case and surrounding space; repeated values count once.

Testing

The pattern ships with a Testing Library test (bulk-id-paste-matcher.test.tsx) that covers parsing separators, matching by value and label, leaving unmatched values in the box and removing chips.

Guide and examples

When to use it

Use it for adding many known records at once: SKUs to an order, user IDs to a group, emails to an audience, where checking a list one by one is the real cost.

Do not use it when people are choosing items they have not decided yet. Use a searchable multi-select.

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.

Props

Prop	Type	Default	Description
`options`	`{ value, label }[]`	-	What the pasted text is matched against (by value or label, ignoring case).
`value`	`string[]`	-	Matched, added values (controlled).
`defaultValue`	`string[]`	`[]`	Initial values.
`onValueChange`	`(value: string[]) => void`	-	Runs when matches are added or removed.
`noun`	`string`	`items`	Word used in labels.
`onUnmatched`	`(values: string[]) => void`	-	Runs with the values that matched nothing.

Accessibility

The textarea has a visible label and a description of the accepted separators.
After pressing Add matches a role="status" line reads the counts and the unmatched values stay in the box so they can be corrected.
Added items are chips with Remove buttons named after the item.
Matching ignores case and surrounding space; repeated values count once.

Testing

The pattern ships with a Testing Library test (bulk-id-paste-matcher.test.tsx) that covers parsing separators, matching by value and label, leaving unmatched values in the box and removing chips.