SwiftUI.js
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.

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

Examples

Examples

Preview unavailable for this example in the static docs build.

Examples

Preview unavailable for this example in the static docs build.

Show code
<SearchField value=""></SearchField>

API

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'>.

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

Status: adapted

SwiftUI Correspondence: Adapted from SwiftUI's searchable text entry patterns into a standalone web control.

Notes

  • 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"].

On this page