Picker

Beta

Bottom sheet item selector with an input-like trigger. Ideal for mobile-friendly option selection.

Installation

npm install @xaui/native

Import

import { Picker } from '@xaui/native/picker'

Basic Usage

Minimal example showing the component with its default configuration.

import { Picker } from '@xaui/native/picker'

export function Example() {
  return <Picker />
}

Basic

import { useState } from 'react'
import { Picker } from '@xaui/native/picker'

export function BasicExample() {
  const [value, setValue] = useState('')

  return (
    <Picker
      label="Country"
      placeholder="Select a country..."
      options={[
        { label: 'France', value: 'fr' },
        { label: 'United States', value: 'us' },
        { label: 'Japan', value: 'jp' },
        { label: 'Brazil', value: 'br' },
      ]}
      value={value}
      onValueChange={setValue}
    />
  )
}

With sheet title

import { useState } from 'react'
import { Picker } from '@xaui/native/picker'

export function SheetTitleExample() {
  const [value, setValue] = useState('')

  return (
    <Picker
      label="Language"
      sheetTitle="Select a language"
      options={[
        { label: 'English', value: 'en' },
        { label: 'French', value: 'fr' },
        { label: 'Spanish', value: 'es' },
      ]}
      value={value}
      onValueChange={setValue}
    />
  )
}