Are the ai2 Multi selects free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Multi selects

Five multi-selects with real selection state: removable tags, rounded chips with a +N overflow, a count badge, checkbox rows and an inline comma-separated summary. Clicking an option toggles it and the panel stays open; it closes on outside click or Escape. Each is self-contained (no radix, no native select), sized and token-driven.

SelectMulti

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/select-multi

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/select-multi.tsx

"use client"

import * as React from "react"
import { Check, ChevronDown, X } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Multi select family: 5 self-contained, GENUINELY multi-select listboxes. The only
   difference is how the selected values are summarized in the trigger and how the
   option row looks (tag, chip, counter, checkbox, inline list). In multi-select,
   clicking an option TOGGLES the value and the panel stays open (so selection can
   continue); it closes on an outside click or Escape. The selection state lives in
   the ROOT component, so it does not disappear even when the panel unmounts. NO
   radix, NO portal. Color comes ONLY from tokens, via alpha color-mix. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const triggerHeight: Record<StyledSize, string> = {
  sm: "min-h-8 text-sm",
  md: "min-h-9 text-sm",
  lg: "min-h-10 text-base",
  xl: "min-h-12 text-base",
}

const panelWidth: Record<StyledSize, string> = {
  sm: "w-48",
  md: "w-56",
  lg: "w-64",
  xl: "w-72",
}

export interface StyledSelectOption {
  value: string
  label: string
}

export interface StyledMultiSelectProps {
  className?: string
  size?: StyledSize
  placeholder?: string
  options?: StyledSelectOption[]
  /** Multi-selection: the controlled value array. */
  value?: string[]
  /** Cok secim: uncontrolled baslangic dizisi. */
  defaultValue?: string[]
  onValueChange?: (v: string[]) => void
}

const defaultOptions: StyledSelectOption[] = [
  { value: "design", label: "Design" },
  { value: "engineering", label: "Engineering" },
  { value: "marketing", label: "Marketing" },
  { value: "support", label: "Support" },
  { value: "sales", label: "Sales" },
]

const triggerBase =
  "inline-flex w-full shrink-0 select-none items-center justify-between gap-2 rounded-lg border border-field-border bg-background px-3 py-1 text-left font-medium text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const panelBase =
  "absolute left-0 top-full z-50 mt-1 max-h-72 min-w-48 origin-top overflow-auto rounded-xl border border-border bg-popover p-1.5 text-sm text-popover-foreground shadow-lg outline-none"

const optionBase =
  "flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"

const panelMotion = {
  initial: { opacity: 0, scale: 0.96, y: -6 },
  animate: { opacity: 1, scale: 1, y: 0 },
  exit: { opacity: 0, scale: 0.96, y: -6 },
  transition: { type: "spring" as const, stiffness: 340, damping: 26 },
}

const tagBase =
  "inline-flex max-w-full items-center gap-1 rounded-md border border-[color-mix(in_oklab,var(--color-border)_80%,transparent)] bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"

type Summary = "tags" | "chips" | "count" | "inline"

interface MultiFlags {
  /** Trigger'daki secim ozeti bicimi. */
  summary: Summary
  /** Shows a square checkbox on the option row. */
  checkbox?: boolean
  /** tags/chips ozetinde en fazla kac rozet gosterilir. */
  maxTags?: number
}

function BaseMultiSelect({
  className,
  size = "md",
  placeholder = "Select...",
  options,
  value,
  defaultValue,
  onValueChange,
  summary,
  checkbox,
  maxTags = 2,
}: StyledMultiSelectProps & MultiFlags) {
  const list = options ?? defaultOptions
  const reduce = useReducedMotion()
  const uid = React.useId()
  const listId = `${uid}-listbox`
  const optionId = (i: number) => `${uid}-option-${i}`

  const [open, setOpen] = React.useState(false)
  const [active, setActive] = React.useState(0)
  const [internal, setInternal] = React.useState<string[]>(defaultValue ?? [])
  const wrapperRef = React.useRef<HTMLDivElement>(null)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  const isControlled = value !== undefined
  const selected = isControlled ? value : internal
  const selectedOptions = list.filter((o) => selected.includes(o.value))

  const commit = React.useCallback(
    (next: string[]) => {
      if (!isControlled) setInternal(next)
      onValueChange?.(next)
    },
    [isControlled, onValueChange],
  )

  const toggle = React.useCallback(
    (v: string) => {
      commit(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v])
    },
    [commit, selected],
  )

  const close = React.useCallback(() => {
    setOpen(false)
    triggerRef.current?.focus()
  }, [])

  React.useEffect(() => {
    if (!open) return
    const onPointer = (e: PointerEvent) => {
      const node = wrapperRef.current
      if (node && e.target instanceof Node && !node.contains(e.target)) setOpen(false)
    }
    window.addEventListener("pointerdown", onPointer)
    return () => window.removeEventListener("pointerdown", onPointer)
  }, [open])

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      if (!open) return
      e.preventDefault()
      close()
      return
    }
    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
      e.preventDefault()
      if (!open) {
        setOpen(true)
        setActive(0)
        return
      }
      const dir = e.key === "ArrowDown" ? 1 : -1
      setActive((i) => (i + dir + list.length) % list.length)
      return
    }
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault()
      if (!open) {
        setOpen(true)
        setActive(0)
        return
      }
      const opt = list[active]
      if (opt) toggle(opt.value)
    }
  }

  const fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
  const anim = reduce ? fade : panelMotion

  let triggerContent: React.ReactNode
  if (selectedOptions.length === 0) {
    triggerContent = <span className="truncate text-muted-foreground">{placeholder}</span>
  } else if (summary === "count") {
    triggerContent = (
      <span className="flex min-w-0 items-center gap-2">
        <span className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">
          {selectedOptions.length}
        </span>
        <span className="truncate">selected</span>
      </span>
    )
  } else if (summary === "inline") {
    triggerContent = <span className="truncate">{selectedOptions.map((o) => o.label).join(", ")}</span>
  } else {
    const shown = selectedOptions.slice(0, maxTags)
    const rest = selectedOptions.length - shown.length
    triggerContent = (
      <span className="flex min-w-0 flex-wrap items-center gap-1 py-1">
        {shown.map((o) => (
          <span key={o.value} className={cn(tagBase, summary === "chips" && "rounded-full px-2")}>
            <span className="truncate">{o.label}</span>
            {summary === "tags" ? (
              <span
                aria-hidden="true"
                className="inline-flex shrink-0 cursor-default items-center rounded-sm text-muted-foreground transition-colors hover:text-foreground [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none"
                onPointerDown={(e) => e.stopPropagation()}
                onClick={(e) => {
                  e.stopPropagation()
                  toggle(o.value)
                }}
              >
                <X />
              </span>
            ) : null}
          </span>
        ))}
        {rest > 0 ? (
          <span className={cn(tagBase, summary === "chips" && "rounded-full px-2", "text-muted-foreground")}>
            +{rest}
          </span>
        ) : null}
      </span>
    )
  }

  return (
    <div
      ref={wrapperRef}
      data-slot="styled-select"
      className={cn("relative inline-flex w-56 max-w-full", panelWidth[size], className)}
    >
      <button
        ref={triggerRef}
        type="button"
        data-slot="styled-select-trigger"
        role="combobox"
        aria-expanded={open}
        aria-haspopup="listbox"
        aria-controls={listId}
        aria-activedescendant={open ? optionId(active) : undefined}
        className={cn(triggerBase, triggerHeight[size])}
        onClick={() => setOpen(!open)}
        onKeyDown={onKeyDown}
      >
        {triggerContent}
        <ChevronDown
          className={cn("shrink-0 opacity-70 transition-transform duration-200", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open ? (
          <motion.div
            id={listId}
            role="listbox"
            aria-multiselectable
            data-slot="styled-select-content"
            className={cn(panelBase, panelWidth[size])}
            initial={anim.initial}
            animate={anim.animate}
            exit={anim.exit}
            transition={reduce ? { duration: 0.14 } : panelMotion.transition}
          >
            <div className="flex flex-col">
              {list.map((option, i) => {
                const isSelected = selected.includes(option.value)
                return (
                  <button
                    key={option.value}
                    id={optionId(i)}
                    type="button"
                    role="option"
                    tabIndex={-1}
                    aria-selected={isSelected}
                    className={cn(optionBase, i === active && "bg-accent text-accent-foreground")}
                    onPointerEnter={() => setActive(i)}
                    onClick={() => toggle(option.value)}
                  >
                    {checkbox ? (
                      <span
                        aria-hidden="true"
                        className={cn(
                          "flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-field-border transition-colors",
                          isSelected && "border-primary bg-primary text-primary-foreground",
                        )}
                      >
                        {isSelected ? <Check className="size-3" /> : null}
                      </span>
                    ) : (
                      <span className="flex size-4 shrink-0 items-center justify-center text-primary">
                        {isSelected ? <Check /> : null}
                      </span>
                    )}
                    <span className="truncate">{option.label}</span>
                  </button>
                )
              })}
            </div>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  )
}

/* Tags: the selected items sit in the trigger as removable tags. */
export function TagsSelect(props: StyledMultiSelectProps) {
  return <BaseMultiSelect {...props} summary="tags" />
}

/* Chips: secilenler yuvarlak chip'ler, tasanlar +N ile ozetlenir. */
export function ChipsSelect(props: StyledMultiSelectProps) {
  return <BaseMultiSelect {...props} summary="chips" maxTags={2} />
}

/* Count: the trigger shows only the number of selections in a badge. */
export function CountSelect(props: StyledMultiSelectProps) {
  return <BaseMultiSelect {...props} summary="count" />
}

/* Checks: the option rows carry a square checkbox. */
export function ChecksSelect(props: StyledMultiSelectProps) {
  return <BaseMultiSelect {...props} summary="count" checkbox />
}

/* InlineMulti: the selected items read as one comma-separated line in the trigger. */
export function InlineMultiSelect(props: StyledMultiSelectProps) {
  return <BaseMultiSelect {...props} summary="inline" checkbox />
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Chips

Rounded chips summarise picks with a +N overflow.

Count

The trigger shows only how many are selected.

Checks

Option rows carry a square checkbox.

Inline

Picks read as one comma-separated line.

ai2 Multi selects: 5 styled variations on the token system

The ai2 Multi selects are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around multi-choice selects that differ in how picks are summarised. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion fades and scales the panel in from the trigger. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the scale is skipped and the panel appears instantly.

What is in the ai2 Multi selects?

5 exports in one file: Tags, Chips, Count, Checks and Inline. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion fades and scales the panel in from the trigger.
Reduced-motion aware: Under prefers-reduced-motion, the scale is skipped and the panel appears instantly.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Multi selects sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.