Components

Picker

Choose one value from a native select control.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Picker } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
const options = [
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
    { value: '3', label: 'Option 3' },
];
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>);
};
export default function Example() {
    return (<PickerDemo />);
}

Usage and limitations

  • Supply options with value and label. Controlled: selection/onSelectionChange; React aliases: selectedValue/onValueChange. Uncontrolled: defaultSelection.
  • Callbacks return the original option value type. Option values must be unique after string coercion.
  • The empty string is reserved for the hidden placeholder option and cannot be a real option value.
  • Supports disabled and native keyboard/mobile behavior. Provide an accessible label and validate required selection in the form.

API reference

PropTypeRequiredDescription
selectionstring | numberNoSwiftUI-style alias for the currently selected value.
selectedValuestring | numberNoThe currently selected value.
defaultSelectionstring | numberNoSwiftUI-style alias for the initial uncontrolled selection.
defaultSelectedValuestring | numberNoThe initial uncontrolled selection.
onSelectionChange(value: string | number) => voidNoSwiftUI-style alias fired when the selection changes.
onValueChange(value: string | number) => voidNoCallback fired when the selection changes.
optionsIPickerOption[]YesThe list of options to display.
placeholderstringNoPlaceholder text when no option is selected.
disabledbooleanNoWhether the picker is disabled. Default: false

Inherits additional props from Omit< IBaseElementComponent<'select'>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'disabled' | 'multiple' | 'size' >.