component
TagPicker
By Heyuhm
Details
- HeyuhmAuthor
- componentType
- 2026-04-15Published
- 2026-04-10Updated
- 2026-04-01Added
- FormsCategories
Summary
A flexible multi-select tag input
Description
Tag Picker is built to handle both predefined options and user-generated input with a stable and predictable interaction model. Core Features Select from predefined tags or create custom ones Real-time filtering based on input Prevents duplicate selections automatically Keyboard-friendly (Enter to add, Backspace to remove) Fully supports Korean IME input without breaking characters UI & Interaction Single-container dropdown design (input + list in one box) Expands vertically instead of spawning a separate panel Tags and input flow together with automatic wrapping Chevron toggle with clear open/close state Smooth expand/collapse transitions State & Behavior Selected tags are preserved when adding new ones No duplication or unintended resets during input Max tag limit with inline feedback Clean separation between input state and selected values Form Integration Works seamlessly with Framer Forms Outputs selected values as a single field (comma-separated string) No unnecessary array duplication ([] fields removed) Syncs instantly with form state on add/remove Customization Separate styles for Default and Open states (Surface, Border) Control typography, spacing, radius, and colors Configurable label and field name Fully responsive layout
Introduction
A flexible multi-select tag input
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4100