inputs/DSSearchBar

DSSearchBar

inputs

since 0.1.0

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

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

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
placeholder	String	"Search..."	Placeholder text.
textreq	Binding<String>	—	Bound search query.
size	DSInputSize	.md	Bar height (.sm, .md, .lg).
onSubmit	(() -> Void)?	nil	Action when Return is pressed.

Examples

Filtering a list

Real-time filter bound to a list.

swift

DSSearchBar(placeholder: "Search projects...", text: $query)
    .onChange(of: query) { _, newValue in
        viewModel.filter(newValue)
    }

Usage Guidelines

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

Related Components

TextField CommandPalette