MultiSelect

Multi-option select with tags

Import: import { MultiSelect } from 'react-native-mantine';

Usage

import { useState } from 'react';
import { MultiSelect } from 'react-native-mantine';

const [value, setValue] = useState<string[]>([]);

<MultiSelect
  label="Choose frameworks"
  placeholder="Pick multiple"
  data={['React', 'Angular', 'Vue', 'Svelte']}
  value={value}
  onChange={setValue}
  searchable
  clearable
/>

Props

Prop	Type	Default	Description
`data` (required)	`(string \| MultiSelectDataItem)[]`		MultiSelect data
`value`	`string[]`		Selected values
`defaultValue`	`string[]`		Default value for uncontrolled component
`onChange`	`(value: string[]) => void`		Called when value changes
`placeholder`	`string`		Placeholder
`label`	`React.ReactNode`		MultiSelect label
`description`	`React.ReactNode`		MultiSelect description
`error`	`React.ReactNode`		Error message
`size`	`MantineSize`	`'md'`	MultiSelect size
`radius`	`MantineNumberSize`	`'sm'`	Border radius
`color`	`MantineColor`	`'blue'`	MultiSelect color
`disabled`	`boolean`	`false`	If true, multiselect will be disabled
`searchable`	`boolean`	`false`	If true, multiselect will be searchable
`searchPlaceholder`	`string`	`'Search...'`	Search placeholder
`clearable`	`boolean`	`false`	If true, clear button will be shown
`clearButtonLabel`	`string`	`'Clear all'`	Clear button label
`maxDropdownHeight`	`number`	`400`	Max dropdown height
`maxSelectedValues`	`number`	`5`	Max selected values displayed
`icon`	`React.ReactNode`		Icon displayed on the left side
`accessibilityLabel`	`string`		Accessibility label
`accessibilityHint`	`string`		Accessibility hint
`style`	`any`		Additional styles
`testID`	`string`		Test identifier used by testing frameworks

Source on GitHub · npm