iOS Segmented Control
We’ll rebuild this iOS segmented control component that you can use inside other components, with code overrides and with Framer’s interactions .
The segmented control (UISegmentedControl in developer speak) has been one of iOS’s built-in UI elements since the launch of the first iPhone. Its look changed in iOS 13 (sliding selection indicator, which a bit later also appeared in Framer’s UI), and this version is the one we’re making. Our component will look and feel the same as the real deal.
It can switch between Light Mode and Dark Mode, and you can set its selected segment by index number (as in the example below) and by name (e.g., ‘Mango’ or ‘🥭’).
This control is a bit more complicated than a simple button or switch, so we’ll build it step by step.
We start with a basic version that simply displays the segments. We then make the segments tappable, add the moving selection indicator, the separators, etc.
You can start with Version A and completely rebuild the component or just compare the different versions to get an understanding of the code changes.
- Version A — The starter version has property controls and displays the options as segments. It isn’t yet possible to select an option, though.
- Version B — Adding state: You can tap to select an option; it’ll be displayed in bold type.
- Version C — Using the property controls, you can set which option should initially be selected.
- Version D — We add the ‘selection indicator’, the bar that slides to the selected option.
- Version E — We add separators (thin gray lines) between the segments.
- Version F — We make the separators to the left and right of the selected segment fade out.
- Version G — We make it update when you change its selected segment with a property control.
- Version H — We add event properties that can share the component’s selected option and trigger transitions.
- Version I — We add TypeScript for better reusability inside other components.
- Example prototypes — Four examples of how to use this component in a prototype.