TagPicker

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