Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA multi-select with a maximum that keeps the other options visible but disabled with the reason, counts picks as 2 of 3 and announces when the limit is reached. Use this when only a few items may be chosen.
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 for choosing three skills, five tags, four products to compare or two reviewers, where the cap is a rule people should understand rather than a mystery that makes options stop responding.
Do not use it when there is no cap. Use a plain multi-select.
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 |
|---|---|---|---|
options | { value, label, disabled?, disabledReason? }[] | - | The items. disabledReason explains an option that can never be chosen. |
max | number | - | The most items that can be selected. |
value | string[] | - | Selected values (controlled). |
defaultValue | string[] | [] | Initial selection. |
onValueChange | (value: string[]) => void | - | Runs on every change. |
noun | string | items | Word used in labels. |
aria-disabled and say limit of N reached in text; options that are disabled for another reason say that reason.role="status" line announces Limit of 3 reached. and You can choose 1 more.Skills, 2 of 3 selected.The pattern ships with a Testing Library test (multi-select-limit-reasons.test.tsx) that covers the counter, disabling at the limit with the reason, removing to free a slot and the announcements.