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
valueandlabel. 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
disabledand native keyboard/mobile behavior. Provide an accessible label and validate required selection in the form.
API reference
| Prop | Type | Required | Description |
|---|---|---|---|
selection | string | number | No | SwiftUI-style alias for the currently selected value. |
selectedValue | string | number | No | The currently selected value. |
defaultSelection | string | number | No | SwiftUI-style alias for the initial uncontrolled selection. |
defaultSelectedValue | string | number | No | The initial uncontrolled selection. |
onSelectionChange | (value: string | number) => void | No | SwiftUI-style alias fired when the selection changes. |
onValueChange | (value: string | number) => void | No | Callback fired when the selection changes. |
options | IPickerOption[] | Yes | The list of options to display. |
placeholder | string | No | Placeholder text when no option is selected. |
disabled | boolean | No | Whether the picker is disabled. Default: false |
Inherits additional props from Omit<
IBaseElementComponent<'select'>,
'value' | 'defaultValue' | 'onChange' | 'children' | 'disabled' | 'multiple' | 'size'
>.
PhotosPicker
PhotosPicker opens an image-only asset chooser and forwards selected files, keeping SwiftUI's media selection intent while relying on the browser's native file picker.
Popover
Popover presents lightweight content anchored to another control. It aligns with SwiftUI's `popover` presentation while keeping web-friendly dialog semantics.