Multi Select Inputs
Overview
This Multi-Select component allows users to select multiple options from a list using beautifully styled chips.
It is designed for flexibility, making it ideal for filters, forms, and interactive UI sections in Framer projects.
Key Features
• Multi Selection Support – Select multiple items with a configurable limit• Max Selection Control – Restrict how many items can be selected• Smooth Animations – Subtle scale effect on select and shake feedback on limit• Icon Support – Show icons on selected items (left or right)• Icon Customization – Control size, position, and tint color• Fully Customizable UI – Colors, borders, radius, typography, and spacing• Responsive Layout – Wraps automatically with flexible spacing• Form Ready – Includes hidden input for form submissions• Controlled & Uncontrolled – Works with external state or internal state
Customization Options
• Chip background and text colors (normal & selected)• Border width, color, and radius• Font family, size, and weight• Padding (X & Y)• Icon visibility, position, size, and tint• Custom separator (prefix) for output value
How It Works
Click on any chip to select or deselect it. When selected, the chip visually updates and optionally shows an icon.
If the maximum selection limit is reached, additional selections trigger a shake animation for feedback.
Use Cases
• Filters (e.g. categories, tags, skills)• Forms with multiple choice input• Product options selection• Survey or onboarding flows
Nasrullah Ubaid
