MultiValue Dropdown

Add fully customizable, form-ready multi-selection dropdowns to your Framer sites. Designed to match Framer's native design system, this component features portal-based rendering to bypass clipped stacks and fixed-height single-line previewing to keep your form layouts perfectly aligned.

Features

• Framer Forms Compatible: Includes hidden field output (name attribute) that seamlessly submits selected values as a clean, comma-separated string in standard Framer forms.

• Portal Rendering: Uses React Portals so dropdown menus float smoothly over parent containers, clipped stacks, or overflow-hidden layers.

• Fixed-Height Layout: Displays the primary tag plus a smart +X more badge when multiple items are selected, keeping form inputs uniformly sized (44px).

• Native Property Controls:

  • Array Option Builder: Easily add, edit, or reorder options with custom labels and optional form values directly in the Framer properties panel.

  • Native Font Selector: Complete control over typography, font weight, and size using Framer’s native ControlType.Font.

  • Full Color & Style Customization: Fine-tune background, text, accent tag, placeholder, border colors, and corner radius.

• Smooth Animations: Built with Framer Motion for clean opening/closing transitions and interactive tag removals.

• Dismiss on Outside Click: Automatically closes when clicking anywhere outside the menu or scrolling.