Skip to content
DocsComponentsTemplatesThemesPlayground
Search
Switch to dark mode
Community
GitHub
Get started
Type to search
↑↓Navigate↵SelectEscClose
Components
Overview
App Shell
App Shell
useAppShellMobile
Aspect Ratio
Avatar
Avatar
Avatar Group
Avatar Group Overflow
Avatar Status Dot
Badge
Banner
Blockquote
Breadcrumbs
Breadcrumb Item
Breadcrumbs
Button
Button
Button Group
Icon Button
Toggle Button
Toggle Button Group
Calendar
Card
Card
Clickable Card
Selectable Card
Carousel
Chat
Chat Composer
Chat Composer Drawer
Chat Composer Input
Chat Composer Token Element
Chat Dictation Button
Chat Layout
Chat Layout Scroll Button
Chat Message
Chat Message Bubble
Chat Message List
Chat Message Metadata
Chat Send Button
Chat System Message
Chat Tokenized Text
Chat Tool Calls
Checkbox
Checkbox Input
Checkbox List
Checkbox List Item
Citation
Code
Code Block
Collapsible
Collapsible
Collapsible Group
useCollapsible
Command Palette
Command Palette
Command Palette Empty
Command Palette Footer
Command Palette Group
Command Palette Input
Command Palette Item
Command Palette List
Context Menu
Context Menu
Context Menu Item
Date Input
Date Input
Date Range Input
Date Time Input
Dialog
Alert Dialog
Dialog
Dialog Header
useImperativeAlertDialog
useImperativeDialog
Divider
Dropdown Menu
Dropdown Menu
Dropdown Menu Item
Empty State
Field
Field
Field Label
Field Status
Input Group
Input Group Text
File Input
Heading
Hover Card
Hover Card
useHoverCard
Icon
Item
Kbd
Layout
Center
Form Layout
Grid
Grid Span
H Stack
Layout
Layout Content
Layout Footer
Layout Header
Layout Panel
Section
Stack Item
V Stack
Lightbox
Link
List
List
List Item
Markdown
Metadata List
Metadata List
Metadata List Item
More Menu
Navigation
Mobile Nav
Mobile Nav Toggle
Nav Heading Menu
Nav Icon
Side Nav
Side Nav Collapse Button
Side Nav Heading
Side Nav Item
Side Nav Section
Top Nav
Top Nav Heading
Top Nav Item
Top Nav Mega Menu
Top Nav Mega Menu Featured Card
Top Nav Mega Menu Item
Top Nav Menu
Number Input
Outline
Overflow List
Overlay
Pagination
Popover
Popover
usePopover
Power Search
Progress Bar
Radio
Radio List
Radio List Item
Resizable
Resize Handle
useResizable
Segmented Control
Segmented Control
Segmented Control Item
Selector
Multi Selector
Selector
Selector Option
Skeleton
Slider
Spinner
Status Dot
Switch
Table
Table
Table Cell
Table Header Cell
Table Row
useTableColumnResize
useTableColumnSettings
useTableFiltering
useTableFilterState
useTablePagination
useTableSelection
useTableSelectionState
useTableSortable
useTableStickyColumns
Tabs
Tab
Tab List
Tab Menu
Text
Text Area
Text Input
Thumbnail
Time Input
Timestamp
Toast
Toast
useToast
Token
Tokenizer
Toolbar
Tooltip
Tooltip
useTooltip
Tree List
Typeahead
Base Typeahead
Typeahead
Typeahead Item
VisuallyHidden
Utilities
Layer Provider
Link Provider
Media Theme
Syntax Theme
Theme
useClickableContainer
useEntryAnimation
useFocusTrap
useGridFocus
useImageMode
useInputContainer
useLayer
useListFocus
useMediaQuery
useOverflow
useScrollLock
useScrollOverflow
useStreamingText
useTheme
DocsComponentsTemplatesThemesPlaygroundBlogCommunityChangelog
GitHub
Discord
Facebook
Instagram
Threads
X
Terms of usePrivacy policy
©2026 Meta Platforms, Inc.
Multi Selector@astryxdesign/core v0.1.2 · MultiSelector
Interactive preview needs required props that cannot be generated automatically.Missing: options, value

Props

Required

label
string

Label text for accessibility.

onChange
(value: string[]) => void

Callback fired when the selection changes.

options
MultiSelectorOptionType[]

Array of items: strings, objects with value/label/icon/disabled, dividers, or sections.

value
string[]

Currently selected values.

Optional

changeAction
(value: string[]) => void | Promise<void>

Async action on change. Fires after onChange.

description
string

Helper text displayed below the label.

hasSearch
boolean

Whether to show a search input for filtering options.

hasSelectAll
boolean

Whether to show a select-all checkbox.

isDisabled
boolean

Disables the selector.

isLabelHidden
boolean

Visually hides the label while keeping it accessible.

isLoading
boolean

Shows a loading spinner in the trigger.

isOptional
boolean

Marks the field as optional.

isRequired
boolean

Marks the field as required.

maxBadges
number (default: 3)

Maximum badges to show before "+N". Only for triggerDisplay="badges".

placeholder
string (default: 'Select...')

Placeholder text shown when no value is selected.

renderOption
(option: MultiSelectorOptionData) => ReactNode

Custom render function for each selectable option in the dropdown. Not called for dividers, sections, or the select-all row.

searchPlaceholder
string (default: 'Search...')

Placeholder text for the search input.

selectAllLabel
string (default: 'Select all')

Label for the select-all checkbox.

size
| 'sm'
| 'md' (default)
| 'lg'

Size variant for the selector.

sm
md
lg
status
{type: 'error' | 'warning' | 'success', message?: string}

Validation status with an optional message.

None
error
warning
success
triggerDisplay
| 'count' (default)
| 'labels'
| 'badges'

How to display selected items in the trigger.

count
labels
badges
xstyle
StyleXStyles

StyleX styles for layout customization. Must be a stylex.create() value.

Multi Selector · Astryx