Native select

A NativeSelect is a real <select> on the Web, so its open list is the operating system’s: the wheel on iOS Safari, the dropdown on Android Chrome. Only the closed box is styled. That is the trade, not an omission. On React Native, it is an action sheet on iOS and a modal list on Android.

CourierChoose a courierPost officeBike courierDroneWho carries it to the door.

NativeSelectDemo.tsx

import { View } from '@hozo/core'
import { Field, NativeSelect } from '@hozo/ui'
import { useState } from 'react'

const COURIERS = [
  { value: 'post', label: 'Post office' },
  { value: 'bike', label: 'Bike courier' },
  { value: 'drone', label: 'Drone', disabled: true },
]

export function NativeSelectDemo() {
  const [courier, setCourier] = useState<string>()
  return (
    <View className="w-full max-w-md">
      <Field label="Courier" description="Who carries it to the door.">
        {(control) => (
          <NativeSelect
            {...control}
            options={COURIERS}
            placeholder="Choose a courier"
            value={courier}
            onValueChange={setCourier}
          />
        )}
      </Field>
    </View>
  )
}

• options: { value, label, disabled? } for each option. The values are strings, as they are in a <select>.
• value and onValueChange, or defaultValue.
• placeholder: shown until something is chosen, and not choosable itself.
• Inside a Field, {...control} gives it its label, as it does for Input. When you need a list you can style, use Listbox or Combobox.