Screen · Commerce
Filters SwiftUI Screen
A filter panel with chip groups, a two-handle price range and a result count that recounts as you choose.
A filter sheet over a results grid: multi-select chip groups, a dual-handle range slider, a sort row, and a live result count in tabular figures that recounts on every change, with Clear all and a sticky apply button.
- SwiftUI
- iOS 17.0+
- filter-sheet
$199 once, every piece included. See how installing works · Sign in
01
What's included
SwiftUI source you own, built on Apple frameworks only.
- Multi-select chip groups and a sort row
- A dual-handle range slider, adjustable with VoiceOver
- A live result count that recounts in tabular figures
- Clear all resets every group at once
In the Build Kit
Press (style), Shopping (brief), Shop and Track (recipe). Your agent builds around this screen in the same design.
02
Implementation notes
How it behaves, what it handles, and the decisions behind it.
The count is the hero, not an afterthought: it sits at display size in tabular figures and transitions with numericText, so every chip tap and every step of the price drag recounts in place instead of redrawing the number. Chips toggle with a spring and a selection tick, the price band inks only the histogram bars that fall inside it, "Clear all" resets every facet in one animation, and the sticky bar always carries the same number as the figure above it.
Notes
FilterSheetis a scaffold, not a policy. It never owns the facets or the filtering: put whatever sections you like in its content, keep the state in the host, and handresultCountback down.RangeSliderpicks up whichever handle is nearer the finger, keeps each one on its own side of the other by at leastminimumDistance, and snaps tostepwith a selection tick. Each handle is its own adjustable VoiceOver element ("Lowest price, $160") with a 44pt target whateverhandleSizeis.FilterChipGroupwraps with aLayoutrather than a fixed grid, so long titles and accessibility text sizes reflow instead of truncating, and selected chips carry the.isSelectedtrait.- The histogram and the count read the same twenty price bands, so the bars and the figure can never disagree.
- Reduce Motion replaces the chip springs and the count settle with ease-outs; the slider stops scaling its handle.
FilterSheetExampleat the end ofFilterSheet.swiftis the screen shown in the preview; copy it as a starting point.
03
Keep building
Pieces that work well next to this one.