Search Bar
Capsule-shaped search bar with magnifying glass, clear button, and ultra-thin material background
Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.
Works with
What it does
Capsule-shaped search bar with a magnifying-glass icon, an inline text field, and an auto-appearing clear button. Uses .ultraThinMaterial as its background for a frosted look that sits nicely on top of gradients or glassy surfaces.
The component does NOT apply any outer horizontal padding — the caller is expected to wrap it with .padding(.horizontal) (or similar) so the bar can be reused in different layouts without fighting the caller's spacing rules.
What you get
- ✓42 lines of source code, ready to paste
- ✓Source Code
- ✓Usage
- ✓Parameters
Usage
@State private var query = ""
SWSearchBar(text: $query)
.padding(.horizontal)
// With a custom placeholder:
SWSearchBar(text: $query, placeholder: "Search contacts")
.padding(.horizontal)Parameters
text— two-way binding to the current search stringplaceholder— prompt shown when the field is empty (default:"Search")
More in Components
- Add SheetFreeBottom sheet with text input field, Cancel and Continue buttons, presented as a medium detent sheet
- Alert Toast NotificationFreeGlobal toast-style alert overlay with preset styles (info, success, warning, error) and auto-dismiss
- Bullet Point TextFreeText label with a colored capsule bullet point indicator that accepts any View content via @ViewBuilder
- Cached ImageFreeAsyncImage drop-in with a memory + disk cache, so re-created views show remote images on the first frame instead of flashing the placeholder
- Floating LabelsFreeAnimated floating capsule labels that fade in and out at specified positions around an image
- Gradient DividerFreeHorizontal divider with a center-fade gradient effect (clear to color to clear)