https://framer.com/m/TagSelect-hvvFbF.js
TagPicker
TagPicker is the multi-select answer to SelectX: type to filter, click to add, click the pill to remove. The tags below are this library’s real categories and its most-used components, described by a schema.
Examples
Live specimens for every control the component exposes.
Default
Two tags preselected, the rest available. Type in the field to filter the list.
Cap
maxTags decides how many pills the reader may collect. Once the cap is hit the placeholder changes to say so; 0 removes the cap entirely.
maxTags 2 — already at the cap
maxTags 6
maxTags 0 — no cap
Custom entries
allowCustom lets the reader press Enter on something that is not in the list. Leave it off when the values have to match a known set.
allowCustom true
allowCustom false
Spacing and state
gap sets the rhythm between pills; disabled freezes the whole control without hiding what is already chosen.
gap 4
gap 16
disabled
Props
The controls exposed on the instance panel. Anything the schema sets overrides the matching panel control.
Usage
Guidance carried over from the component definition.
Reach for TagPicker
The reader may pick several values, not one.
The list is long enough to want type-to-filter.
A cap on how many can be chosen is meaningful.
Readers should be able to add a value you did not anticipate.
Reach for something else
Only one value may be chosen — use SelectX.
The set is short and all of it should be visible — use Checkbox or RadioCards.
The rows need icons or descriptions — use DropdownMenuX.
Io — UI Basics
Every picker above is a live TagPicker instance over the same tag set — this library’s categories and most-used components. The schema was produced by the tagpicker-schema skill.