Components

SearchField

SearchField provides a dedicated search input with a value-first callback, aligned with SwiftUI's searchable input patterns while remaining an explicit web control.

Example

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

Default

Loading preview…

Code
'use client';
import { SearchField } from '@swiftuijs/ui';
export default function Example() {
    return (<SearchField label="Search" placeholder="Find coffee" value="Flat white"></SearchField>);
}

Status: adapted

Usage and limitations

  • onValueChange supports SwiftUI-style state updates.
  • onSubmit receives the current query when the user presses Enter.
  • Under the hood the component uses a native input[type="search"].

More examples

Empty

API reference

PropTypeRequiredDescription
labelstringYesAccessible label for the search field.
valuestringNoCurrent search text.
placeholderstringNoPlaceholder text shown when the field is empty.
onChange(event: ChangeEvent<HTMLInputElement>) => voidNoStandard change handler for web-style form integrations.
onValueChange(value: string) => voidNoValue-first change handler for SwiftUI-style state updates.
onSubmit(value: string) => voidNoCalled when the user submits the current query with Enter.

Inherits additional props from Omit<IBaseElementComponent<'input'>, 'children' | 'onChange' | 'onSubmit' | 'type'>.

Edit this page on GitHubReport an issue

ScrollViewReader

ScrollViewReader exposes a proxy that can scroll to child `ScrollTarget` anchors by identifier.

Section

Group related rows under an optional header.