Picker

const PickerDemo = () => {
  const [selected, setSelected] = useState<string | number>()
  return (
    <VStack spacing={16}>
      <Text>Selected: {selected || 'None'}</Text>
      <Picker
        selection={selected}
        onSelectionChange={setSelected}
        options={options}
        placeholder="Choose an option"
      />
      <Picker
        selection={selected}
        onSelectionChange={setSelected}
        options={options}
        disabled
      />
    </VStack>
  )
}

Overview

Picker is a control for selecting from a set of mutually exclusive values. Picker displays a list of options and allows the user to select one.

SwiftUI Correspondence: Similar to SwiftUI's Picker.

Notes

• Picker requires an array of options with value and label
• Picker supports SwiftUI-style controlled mode with selection and onSelectionChange
• selectedValue and onValueChange remain available as React-friendly aliases
• Use defaultSelection for an initial uncontrolled value
• Picker can be disabled with the disabled prop
• Use placeholder to indicate no selection; it is rendered as a hidden placeholder option
• Selection callbacks return the original option value type
• Picker automatically handles option rendering and selection
• Option values must be unique after string coercion
• The empty string is reserved for the placeholder state and cannot be used as a real option value

Best Practices

1. Clear options: Use descriptive labels for each option
2. Default selection: Consider providing a default selected value
3. Validation: Validate selection when required
4. Accessibility: Ensure Picker is keyboard accessible
5. Mobile: Test picker behavior on mobile devices