Components

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.

Example

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

Default

Loading preview…

Code
'use client';
import { PhotosPicker } from '@swiftuijs/ui';
export default function Example() {
    return (<PhotosPicker onSelect={() => undefined} maxSelectionCount={1}>Choose photos</PhotosPicker>);
}

Status: adapted

Usage and limitations

  • The current web implementation selects image files via a hidden input[type="file"].
  • maxSelectionCount and matching are the preferred SwiftUI-aligned props.
  • selectionLimit trims the forwarded files to the requested maximum when the SwiftUI alias is not provided.
  • The hidden input resets after each selection so the same asset can be chosen again.
  • The browser controls the actual picker UI.

More examples

Multiple Selection
Video Selection

API reference

PropTypeRequiredDescription
selectionLimitnumberNoMaximum number of selected items. Values above 1 enable multi-select.
maxSelectionCountnumberNoSwiftUI-aligned alias for the maximum number of selected items.
matching'images' | 'videos' | 'any'NoPreferred media type filter. Default: 'images'
onSelect(files: Array<globalThis.File>) => voidYesCalled with the selected image files.

Inherits additional props from Omit<IBaseElementComponent<'button'>, 'type' | 'onSelect'>.

Edit this page on GitHubReport an issue

PhaseAnimator

PhaseAnimator sequences a finite set of named phases and re-renders your content with the current phase value.

Picker

Choose one value from a native select control.