inputs/DSSearchBar
DSSearchBar
inputsDedicated 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.
Interactive Reference
Live showroom
Need the full visual surface?
Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().
Best for exploring:
variants, states, categories, and real app examples in one place.
States
idle
Shows placeholder text and search icon.
active
Focused. Cancel button appears (iOS).
filled
Shows a clear (×) button to reset.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| textreq | Binding<String> | — | Bound search query. |
| placeholder | String | "Search..." | Placeholder text. |
| onSubmit | (() -> Void)? | nil | Action when Return is pressed. |
| onCancel | (() -> Void)? | nil | Action 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.