Skip to content

Select Primitive

Presents a selection of options for the user to choose from, activated by a button.

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/select
import * as SelectPrimitive from '@rn-primitives/select';
import { View } from 'react-native';
function Example() {
return (
<SelectPrimitive.Root defaultValue={{ value: 'apple', label: 'Apple' }}>
<SelectPrimitive.Trigger >
<SelectPrimitive.Value
placeholder='Select a fruit'
/>
</SelectPrimitive.Trigger>
<SelectPrimitive.Portal>
<SelectPrimitive.Overlay style={StyleSheet.absoluteFill}>
<SelectPrimitive.Content>
<SelectPrimitive.ScrollUpButton />
<SelectPrimitive.Viewport>
<SelectPrimitive.Group>
<SelectPrimitive.Label>Fruits</SelectPrimitive.Label>
<SelectPrimitive.Item label='Apple' value='apple'>
Apple
<SelectPrimitive.ItemIndicator />
</SelectPrimitive.Item>
<SelectPrimitive.Item label='Banana' value='banana'>
Banana
<SelectPrimitive.ItemIndicator />
</SelectPrimitive.Item>
<SelectPrimitive.Item label='Blueberry' value='blueberry'>
Blueberry
<SelectPrimitive.ItemIndicator />
</SelectPrimitive.Item>
<SelectPrimitive.Item label='Grapes' value='grapes'>
Grapes
<SelectPrimitive.ItemIndicator />
</SelectPrimitive.Item>
<SelectPrimitive.Item label='Pineapple' value='pineapple'>
Pineapple
<SelectPrimitive.ItemIndicator />
</SelectPrimitive.Item>
</SelectPrimitive.Group>
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Overlay>
</SelectPrimitive.Portal>
</SelectPrimitive.Root>
);
}

Extends View props

PropTypeNote
defaultValueoption: { value: string, label: string } | undefined(optional)
valueoption: { value: string, label: string } | undefined(optional)
onValueChange(option: { value: string, label: string } | undefined ) => void(optional)
onOpenChange(value: boolean) => void(optional)
disabledboolean(optional)
asChildboolean(optional)
dir’ltr’ | ‘rtl’Web only (optional)
namestringWeb only (optional)
requiredbooleanWeb only (optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
MethodsargsNote
openopens the select
closecloses the select

Extends Pressable props

PropTypeNote
placeholderstring
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)
closeOnPressboolean(optional)
PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumber(optional)
insetsInsets(optional)
avoidCollisionsboolean(optional)
align’start’ | ‘center’ | ‘end’(optional)
side’top’ | ‘bottom’(optional)
sideOffsetnumber(optional)
disablePositioningStylebooleanNative Only (optional)
position’popper’ | ‘item-aligned’ | undefinedWeb Only (optional)

Extends Pressable props

PropTypeNote
valuestring
labelstring
closeOnPressboolean(optional)
asChildboolean(optional)

Extends Text props except children

Extends View props

PropTypeNote
forceMountboolean(optional)

Extends View props

Extends Text props

Extends View props

PropTypeNote
valuestring
labelstring
closeOnPressboolean(optional)
asChildboolean(optional)

Web Only: Extends radix’s select ScrollUpButton props

Only renders its children on native

Web Only: Extends radix’s select ScrollDownButton props

Only renders its children on native

Web Only: Extends radix’s select Viewport props

Only renders its children on native