MultiSelect

MultiSelect

Basic Usage

Apple

Add

Searchable

Type to filter options

Select fruits...

Add

With Descriptions

Assign roles...

Assign

Max Selection (2)

Limited to 2 items. Button disables when limit reached.

Select up to 2 tags...

Add

Layout Options

Right (default)

Apple

Add

Left

Add

Apple

Below

Banana

Add

Disabled

AppleBanana

Add

Usage

import { MultiSelect, type MultiSelectOption } from "@f0rbit/ui";

const options: MultiSelectOption[] = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "cherry", label: "Cherry" },
];

const [selected, setSelected] = createSignal<string[]>([]);

<MultiSelect
  options={options}
  value={selected()}
  onChange={setSelected}
  placeholder="Select fruits..."
/>

Props

Prop	Type	Default	Description
options	MultiSelectOption[]	—	Available options to select from
value	T[]	—	Array of selected values
onChange	(value: T[]) => void	—	Callback when selection changes
placeholder	string	"Nothing selected"	Placeholder when empty
addLabel	string	"Add"	Label for the add button
doneLabel	string	"Done"	Label for the done button
emptyMessage	string	"No options available"	Message when no options match
searchable	boolean	false	Enable search filtering
searchPlaceholder	string	"Search..."	Search input placeholder
max	number	—	Maximum number of selections
disabled	boolean	false	Disable the select
renderBadge	(option: MultiSelectOption) => JSX.Element	—	Custom badge rendering
renderOption	(option: MultiSelectOption) => JSX.Element	—	Custom option rendering

Searchable

Enable search filtering with searchable:

<MultiSelect
  options={options}
  value={selected()}
  onChange={setSelected}
  searchable
  searchPlaceholder="Search options..."
/>

Options with Descriptions

Add descriptions to options for more context:

const roles: MultiSelectOption[] = [
  { value: "admin", label: "Admin", description: "Full system access" },
  { value: "editor", label: "Editor", description: "Can edit content" },
  { value: "viewer", label: "Viewer", description: "Read-only access" },
];

<MultiSelect
  options={roles}
  value={selected()}
  onChange={setSelected}
/>

Disabled Options

Individual options can be disabled:

const options: MultiSelectOption[] = [
  { value: "available", label: "Available" },
  { value: "unavailable", label: "Unavailable", disabled: true },
];

Maximum Selection

Limit the number of selections with max:

<MultiSelect
  options={options}
  value={selected()}
  onChange={setSelected}
  max={3}
  placeholder="Select up to 3..."
/>

Custom Labels

Customize the Add/Done button labels:

<MultiSelect
  options={options}
  value={selected()}
  onChange={setSelected}
  addLabel="Assign"
  doneLabel="Close"
/>

Custom Badge Rendering

Customize how selected items appear with renderBadge:

<MultiSelect
  options={tags}
  value={selected()}
  onChange={setSelected}
  renderBadge={(opt) => (
    <Badge variant={opt.value === "urgent" ? "error" : "default"}>
      {opt.label}
    </Badge>
  )}
/>

Custom Option Rendering

Customize dropdown options with renderOption:

<MultiSelect
  options={users}
  value={selected()}
  onChange={setSelected}
  renderOption={(opt) => (
    <div class="row">
      <Avatar src={opt.data.avatar} />
      <span>{opt.label}</span>
    </div>
  )}
/>

Empty State

Customize the empty dropdown message:

<MultiSelect
  options={[]}
  value={[]}
  onChange={() => {}}
  emptyMessage="No options available"
/>

Common Use Cases

Tag Assignment

<MultiSelect
  options={availableTags}
  value={selectedTags()}
  onChange={setSelectedTags}
  searchable
  placeholder="Add tags..."
  addLabel="Add Tags"
/>

Role Assignment

<MultiSelect
  options={roles}
  value={userRoles()}
  onChange={setUserRoles}
  placeholder="Assign roles..."
  max={3}
/>

Category Filter

<MultiSelect
  options={categories}
  value={activeFilters()}
  onChange={setActiveFilters}
  searchable
  placeholder="Filter by category..."
/>