inputs/DSSearchBar

DSSearchBar

inputs
since v1.0

Dedicated search input with a magnifying glass icon, clear button, and optional cancel button.

iOS 17+macOS 14+

Purpose

Inline search at the top of lists, grids, or table views.

States

idle

Shows placeholder text and search icon.

active

Focused. Cancel button appears (iOS).

filled

Shows a clear (×) button to reset.

Props

PropTypeDefaultDescription
textreqBinding<String>Bound search query.
placeholderString"Search..."Placeholder text.
onSubmit(() -> Void)?nilAction when Return is pressed.
onCancel(() -> Void)?nilAction when Cancel is tapped.

Examples

Filtering a list

Real-time filter bound to a list.

swift
DSSearchBar(text: $query, placeholder: "Search projects...")
    .onChange(of: query) { viewModel.filter($0) }

Usage Guidelines

  • Filter results immediately on each keystroke — do not require pressing Return.
  • Show an EmptyState when the query yields no results.

Related Components