HTML + CSSFilters
iOS-style segmented control
A segmented control in the Apple style, where the white indicator stretches a little as it slides between options.
Settings
16px
1x
Code
<div class="uv-fsi"><span class="p"></span><button class="on">Day</button><button>Week</button><button>Month</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
The classic Day, Week, Month switch. It fits the stats screen of a fitness app, the chart on a sales dashboard or a calendar that changes its view. People already know this control from their phones, so nobody has to think about it. If you need an iOS segmented control in HTML and CSS, here it is.
Two to four options is the sweet spot. Beyond that the segments get narrow and the labels start to squeeze. It looks most at home on light grey panels; on a dark theme, tone down the indicator shadow.