Select

Forms

A bottom-sheet select picker with optional search filtering. Opens a Sheet containing a scrollable option list.

Installation

bash

npx native-mate add select

component deps: sheet

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Select } from '~/components/ui/select'
import { useState } from 'react'

const [country, setCountry] = useState('')

const options = [
  { label: 'United States', value: 'us' },
  { label: 'United Kingdom', value: 'gb' },
  { label: 'Canada', value: 'ca' },
]

<Select
  label="Country"
  options={options}
  value={country}
  onValueChange={setCountry}
  searchable
  placeholder="Pick a country"
/>

Props

Prop	Type	Default	Description
options	Array<{ label: string; value: string }>	—	List of selectable options.
value	string	—	Currently selected value.
onValueChange	(value: string) => void	—	Called when the user picks an option.
placeholder	string	"Select…"	Placeholder text shown when no value is selected.
searchable	boolean	false	Adds a search input at the top of the picker sheet.
label	string	—	Label rendered above the trigger.

Example

tsx

import { useState } from 'react'
import { Select } from '~/components/ui/select'
import { View } from 'react-native'

const CURRENCIES = [
  { label: 'US Dollar (USD)', value: 'usd' },
  { label: 'Euro (EUR)', value: 'eur' },
  { label: 'British Pound (GBP)', value: 'gbp' },
  { label: 'Japanese Yen (JPY)', value: 'jpy' },
  { label: 'Indian Rupee (INR)', value: 'inr' },
]

export function SelectExample() {
  const [currency, setCurrency] = useState('')

  return (
    <View style={{ padding: 16 }}>
      <Select
        label="Currency"
        options={CURRENCIES}
        value={currency}
        onValueChange={setCurrency}
        searchable
        placeholder="Select currency"
      />
    </View>
  )
}

Slider

Textarea