5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/05lj3a0qaa006.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/382a8k30zyobj.js","/creators-assets/_next/static/immutable/chunks/368p63l4oh_7-.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/228u8o-g1d1_g.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/413kuej600yyw.js","/creators-assets/_next/static/immutable/chunks/02hyzon6wywme.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T897,

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 stateProps

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 WorksClick 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.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

5a:[["$","$L5d",null,{"post":{"id":"019df714-9724-7957-be00-833804849a7b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f3932785-83b1-4fd8-bf98-7d94912b4f13","name":"Nasrullah Ubaid","slug":"nasrullah-ubaid","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"jZp7BiKN2em1ygqaUPb9","resolved":true,"title":"Multi Select Inputs","body":"$5e","bodyJson":null,"introduction":"Flexible Multi Select Input Chip","slug":"multi-select-inputs","author":{"framerUserId":"f3932785-83b1-4fd8-bf98-7d94912b4f13","name":"Nasrullah Ubaid","slug":"nasrullah-ubaid","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/jZp7BiKN2em1ygqaUPb9/multi-select-inputs-Uhgtl3VPFh8daQoRJyMqvCZZgYIO6A","metadata":{"tint":{"h":120,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-17T12:56:37.622Z","updatedAt":"2026-05-15T11:36:32.192Z","publishedAt":"2026-05-05T07:40:15.012Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://multiselecttag.framer.website/","price":"5","paymentUrl":"https://buy.stripe.com/3cI5kD2HA4qBbf70stg360b","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"AJjJz4tWM0WPIu7B78lf","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-05T07:40:15.012Z","updatedAt":"2026-05-05T07:40:15.012Z","reported":false}}],"$L5f"]

Suggested for you