NativeSelect

Platform-native dropdown select

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

Usage

import { NativeSelect } from 'react-native-mantine';

<NativeSelect
  label="Choose a framework"
  placeholder="Select an option"
  data={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' }
  ]}
  value={value}
  onChange={setValue}
/>

Props

Prop	Type	Default	Description
`data` (required)	`(string \| SelectItem)[]`		Select options data. Can be array of strings or objects with {value, label, disabled} structure
`label`	`React.ReactNode`		Input label displayed above the select
`description`	`React.ReactNode`		Description text displayed below the select
`error`	`React.ReactNode`		Error message displayed below the select, also adds error styling
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`"sm"`	Controls select height and font size
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`	Key of theme.radius or any valid number to set border-radius
`variant`	`'default' \| 'filled' \| 'unstyled'`	`"default"`	Controls select appearance - default (with border), filled (with background), or unstyled
`fullWidth`	`boolean`	`false`	If true, select will take full width of parent container
`value`	`string`		Controlled selected value. If provided, select becomes a controlled component
`defaultValue`	`string`		Default selected value for uncontrolled mode
`onChange`	`(value: string) => void`		Callback fired when selected value changes, receives new value as argument
`disabled`	`boolean`	`false`	If true, select will be disabled and not respond to user interactions
`placeholder`	`string`		Placeholder text displayed when no value is selected
`icon`	`React.ReactNode`		Icon element displayed on the left side of the select
`required`	`boolean`	`false`	If true, adds an asterisk (*) to the label to indicate required field
`style`	`ViewStyle`		Additional styles to apply to the select input container
`wrapperStyle`	`ViewStyle`		Additional styles to apply to the outer wrapper (includes label and description)

Source on GitHub · npm