Multi Select

Choose more than one option, from a short list or a searchable one.

Default

The popup stays open while options are toggled. One choice shows its label; more show a count built from plural.

Fallback models

import {
  Field,
  FieldLabel,
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const models = [
  { value: "gpt-4.1", label: "GPT-4.1" },
  { value: "claude-sonnet", label: "Claude Sonnet" },
  { value: "gemini-2.5-flash", label: "Gemini 2.5 Flash" },
  { value: "llama-4", label: "Llama 4" },
  { value: "o3", label: "o3" },
];

export default function MultiSelectDefault() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Fallback models</FieldLabel>
      <MultiSelect items={models} defaultValue={["gpt-4.1", "claude-sonnet"]}>
        <MultiSelectTrigger>
          <MultiSelectValue plural="models" placeholder="Select models" items={models} />
        </MultiSelectTrigger>
        <MultiSelectContent>
          {models.map((model) => (
            <MultiSelectItem key={model.value} value={model.value}>
              {model.label}
            </MultiSelectItem>
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </Field>
  );
}

Variants

Same surfaces as Select: primary is flat neutral-100, secondary is white with shadow-sm.

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const languages = [
  { value: "en", label: "English" },
  { value: "hi", label: "Hindi" },
  { value: "es", label: "Spanish" },
  { value: "fr", label: "French" },
];

export default function MultiSelectVariants() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      {(["primary", "secondary"] as const).map((variant) => (
        <MultiSelect key={variant} items={languages} defaultValue={["en", "hi"]}>
          <MultiSelectTrigger variant={variant} aria-label="Languages">
            <MultiSelectValue plural="languages" placeholder="Select languages" items={languages} />
          </MultiSelectTrigger>
          <MultiSelectContent>
            {languages.map((language) => (
              <MultiSelectItem key={language.value} value={language.value}>
                {language.label}
              </MultiSelectItem>
            ))}
          </MultiSelectContent>
        </MultiSelect>
      ))}
    </div>
  );
}

With icons

Pass leading for a Central Icon and move the checkbox to the end with indicatorPosition="trailing".

Channels

import {
  BrowserIcon,
  Field,
  FieldLabel,
  Icon,
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const channels = [
  { value: "phone", label: "Phone", icon: <Icon name="IconTelephone" /> },
  { value: "web", label: "Web widget", icon: <BrowserIcon /> },
  { value: "chat", label: "Chat", icon: <Icon name="IconBubbleText" /> },
  { value: "api", label: "API", icon: <Icon name="IconCode" /> },
];

export default function MultiSelectIcons() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Channels</FieldLabel>
      <MultiSelect items={channels} defaultValue={["phone", "web"]}>
        <MultiSelectTrigger>
          <MultiSelectValue plural="channels" placeholder="Select channels" items={channels} />
        </MultiSelectTrigger>
        <MultiSelectContent>
          {channels.map((channel) => (
            <MultiSelectItem
              key={channel.value}
              value={channel.value}
              leading={channel.icon}
              indicatorPosition="trailing"
            >
              {channel.label}
            </MultiSelectItem>
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </Field>
  );
}

Long list

Cap the height with a max-h class on MultiSelectContent; the list scrolls with a fade.

Deployment regions

import {
  Field,
  FieldLabel,
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const regions = [
  "US East",
  "US West",
  "Canada",
  "Brazil",
  "UK",
  "Germany",
  "France",
  "UAE",
  "India South",
  "India West",
  "Singapore",
  "Japan",
  "South Korea",
  "Australia",
].map((label) => ({ value: label.toLowerCase().replace(" ", "-"), label }));

export default function MultiSelectLongList() {
  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Deployment regions</FieldLabel>
      <MultiSelect items={regions} defaultValue={["us-east", "india-south"]}>
        <MultiSelectTrigger>
          <MultiSelectValue plural="regions" placeholder="Select regions" items={regions} />
        </MultiSelectTrigger>
        <MultiSelectContent className="max-h-64">
          {regions.map((region) => (
            <MultiSelectItem key={region.value} value={region.value}>
              {region.label}
            </MultiSelectItem>
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </Field>
  );
}

With search

Set searchable and pass items to filter by label. The field stays pinned while results scroll, and checked options sit on top.

Voices to compare

import { useState } from "react";
import {
  Field,
  FieldLabel,
  MultiSelect,
  MultiSelectContent,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const voices = [
  "Aria",
  "Arjun",
  "Chloe",
  "Diego",
  "Emma",
  "Hana",
  "Kai",
  "Leo",
  "Meera",
  "Noah",
  "Priya",
  "Rohan",
  "Sofia",
  "Yuki",
].map((label) => ({ value: label.toLowerCase(), label }));

export default function MultiSelectSearch() {
  const [value, setValue] = useState(["meera", "rohan"]);

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Voices to compare</FieldLabel>
      <MultiSelect items={voices} value={value} onValueChange={setValue}>
        <MultiSelectTrigger>
          <MultiSelectValue plural="voices" placeholder="Select voices" items={voices} />
        </MultiSelectTrigger>
        <MultiSelectContent searchable searchPlaceholder="Search voices" items={voices} className="max-h-64" />
      </MultiSelect>
    </Field>
  );
}

Selected pinned

Set pinSelected with items to list checked options first, then a divider, then the rest alphabetically. Control value so the order follows each toggle.

Call outcomes

import { useState } from "react";
import {
  Field,
  FieldLabel,
  MultiSelect,
  MultiSelectContent,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const outcomes = [
  "Answered",
  "Busy",
  "Callback requested",
  "Failed",
  "Hung up",
  "No answer",
  "Transferred",
  "Voicemail",
].map((label) => ({ value: label.toLowerCase().replace(" ", "-"), label }));

export default function MultiSelectPinned() {
  const [value, setValue] = useState(["transferred", "voicemail"]);

  return (
    <Field className="w-full max-w-xs">
      <FieldLabel>Call outcomes</FieldLabel>
      <MultiSelect items={outcomes} value={value} onValueChange={setValue}>
        <MultiSelectTrigger>
          <MultiSelectValue plural="outcomes" placeholder="Select outcomes" items={outcomes} />
        </MultiSelectTrigger>
        <MultiSelectContent pinSelected items={outcomes} className="max-h-64" />
      </MultiSelect>
    </Field>
  );
}

Disabled

Disable the whole MultiSelect, or a single option that is unavailable.

import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
  MultiSelectValue,
} from "@smallest-inc/ui";

const scopes = [
  { value: "calls:read", label: "Read calls" },
  { value: "calls:write", label: "Place calls" },
  { value: "agents:write", label: "Edit agents" },
  { value: "billing", label: "Manage billing" },
];

export default function MultiSelectDisabled() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <MultiSelect items={scopes} defaultValue={["calls:read"]} disabled>
        <MultiSelectTrigger aria-label="API key scopes">
          <MultiSelectValue plural="scopes" items={scopes} />
        </MultiSelectTrigger>
        <MultiSelectContent>
          {scopes.map((scope) => (
            <MultiSelectItem key={scope.value} value={scope.value}>
              {scope.label}
            </MultiSelectItem>
          ))}
        </MultiSelectContent>
      </MultiSelect>
      <MultiSelect items={scopes} defaultValue={["calls:read"]}>
        <MultiSelectTrigger aria-label="API key scopes">
          <MultiSelectValue plural="scopes" items={scopes} />
        </MultiSelectTrigger>
        <MultiSelectContent>
          {scopes.map((scope) => (
            <MultiSelectItem key={scope.value} value={scope.value} disabled={scope.value === "billing"}>
              {scope.label}
            </MultiSelectItem>
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  );
}

Best practices

When to use

Use when people choose more than one value from a known list, such as fallback models, regions, channels, or API scopes.
Use Select for one value, Combobox with chips when typing to filter is central or the choices should stay visible, and Switch for a single boolean setting.

Behavior

The popup stays open while options are toggled. Pass plural and items to MultiSelectValue so one choice shows its label and more show a count, like “3 regions”.
Set searchable with items once the list is long enough that scanning is slower than typing; checked options pin to the top.
Use pinSelected with a controlled value so checked options move above the divider as they are toggled.
Use leading with indicatorPosition="trailing" when an icon identifies each option.

Content

Name the plural in the trigger for what is counted (“3 voices”), not “3 selected”.

Accessibility

Give each option a name that identifies the item being selected, not merely “Select”.
Label the trigger with FieldLabel or aria-label; a count alone does not say what was chosen.

PreviousMiddle Truncate NextNotification