When to use it
Selection applies immediately. The host owns search, asynchronous results, cancellation, and persistence. Missing selected options retain their raw value as a chip label. Localize every string and count/removal formatter.
FormsReact Native
Multi select
Select multiple searchable options with controlled values and result states.
Native example
Use Multi select
Selection applies immediately. The host owns search, asynchronous results, cancellation, and persistence. Missing selected options retain their raw value as a chip label. Localize every string and count/removal formatter.
View captured React Native example
<LumenMultiSelect label="Teams" values={teams} onValuesChange={setTeams}
query={query} onQueryChange={setQuery} options={matchingTeams} />Reference
Public API
The primary shared and platform-specific options exposed by LumenMultiSelect.
| API | Values or type | Default | Description |
|---|---|---|---|
| label / options | string / readonly LumenAutocompleteOption[] | Required | Names the field and supplies uniquely identified, readable results. |
| values / onValuesChange | ReadonlySet<string> / (values: Set<string>) => void | Required | Controls selection independently from visible results. |
| query / onQueryChange | string / callback | Required | Controls caller-owned search. |
| loading / resultsErrorMessage / onRetry | boolean / string / callback | false / null / null | Provides loading, safe error, and recovery states. |
| description / errorMessage | string | None | Provides help and separate form validation. |
| enabled / readOnly | boolean | true / false | Blocks editing and dismisses selection. |
| chooseLabel / searchLabel / clearSearchLabel / doneLabel | string | English defaults | Localizes selection and dialog actions. |
| emptyLabel / loadingLabel / retryLabel | string | English defaults | Localizes result states. |
| selectionLabel / removeLabel | (count: number) => string / (label: string) => string | English formatters | Localizes counts and chip removal. |
| safeAreaInsets | LumenSafeAreaInsets | None | Passes the application safe-area provider insets into the native sheet. |
| — | — | — | Applies field layout. |
Native behavior
Design and accessibility
Accessibility
Uses a native dialog with named checkbox options, removal actions, validation, and read-only or disabled behavior.
Shared component