Skip to content

Select Primitive

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

Installation

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/select

Usage

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>
);
}

Props

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)

Trigger

Extends Pressable props

PropTypeNote
asChildboolean(optional)

TYPE: SelectTriggerRef

MethodsargsNote
openopens the select
closecloses the select

Value

Extends Pressable props

PropTypeNote
placeholderstring
asChildboolean(optional)

Overlay

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)
closeOnPressboolean(optional)

Portal

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

Content

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)

Item

Extends Pressable props

PropTypeNote
valuestring
labelstring
closeOnPressboolean(optional)
asChildboolean(optional)

ItemText

Extends Text props except children

ItemIndicator

Extends View props

PropTypeNote
forceMountboolean(optional)

Group

Extends View props

Label

Extends Text props

Separator

Extends View props

PropTypeNote
valuestring
labelstring
closeOnPressboolean(optional)
asChildboolean(optional)

ScrollUpButton

Web Only: Extends radix’s select ScrollUpButton props

Only renders its children on native

ScrollDownButton

Web Only: Extends radix’s select ScrollDownButton props

Only renders its children on native

Viewport

Web Only: Extends radix’s select Viewport props

Only renders its children on native