MultiSelect

A searchable multi-value selector with removable chips, keyboard navigation, and async filtering support.

Installation

tsx

import { MultiSelect } from "madagent";

Default

Selected Values

FinanceOperations

Chip Overflow

FinanceOperations+2

Async Filtering

States

Finance

Prop	Type	Default	Description
`options*`	`MultiSelectOption[]`	-	Options with value, label, and optional description, icon, and disabled state
`value`	`string[]`	-	Selected values in controlled mode
`defaultValue`	`string[]`	`[]`	Initial selected values in uncontrolled mode
`onChange`	`(values: string[]) => void`	-	Called whenever the selected values change
`query`	`string`	-	Search text in controlled mode
`onQueryChange`	`(query: string) => void`	-	Delegates filtering to the caller for async or server-backed datasets
`loading`	`boolean`	`false`	Shows a loading status row in the options panel
`placeholder`	`string`	`"Select options…"`	Input hint shown while no values are selected
`size`	`"sm""md""lg"`	`"md"`	Control size
`disabled`	`boolean`	`false`	Disables search, selection, and chip removal
`clearable`	`boolean`	`false`	Adds an affordance that clears every selected value
`emptyMessage`	`ReactNode`	`"No options found"`	Content shown when filtering returns no options
`filter`	`(option, query) => boolean`	-	Overrides the built-in label and description filter
`maxVisibleChips`	`number`	-	Collapses selected chips beyond this count into a +N chip

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

الماليةالعمليات

Usage

tsx

<MultiSelect
  aria-label="الأقسام"
  options={[
    { value: "finance", label: "المالية" },
    { value: "operations", label: "العمليات" },
    { value: "people", label: "الموارد البشرية" },
  ]}
  defaultValue={["finance", "operations"]}
  placeholder="اختر الأقسام…"
  clearable
/>