Select

Searchable select dropdown

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

Usage

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

const [value, setValue] = useState('');

<Select
  label="Choose framework"
  placeholder="Pick one"
  data={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte' },
  ]}
  value={value}
  onChange={setValue}
  searchable
  clearable
/>

Props

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

Source on GitHub · npm