Framer X » Smart components » iOS Segmented Control

iOS Segmented Control

We’ll rebuild this segmented control component that I also published on the Framer Store.

The segmented control (UISegmentedControl in developer speak) has been one of iOS’ built-in UI elements since the launch of the first iPhone. Its look changed in iOS 13, and this new version is the one we’re making.

Our component will look and feel the same as the real deal, and it’ll be a smart component, one that you can use inside other components or with Overrides.

It can switch between Light Mode and the new Dark Mode, and you can set its selected segment by index number (as in the example below), but also 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 1 and completely rebuild the component, or just compare the different versions to get an understanding of the code changes.

The steps

  • Version 1 — The starter version has property controls and displays the options as segments. It isn’t yet possible to select an option, though.
  • Version 2 — Adding State: You can tap to select an option, which will be displayed in bold type.
  • Version 3 — Using the property controls, you can set which option should initially be selected.
  • Version 4 — We add the selection indicator that animates to the selected option.
  • Version 5 — The segments will dynamically resize. This means that you can have less than five options and also change the component’s width.
  • Version 6 — We add separators (thin gray lines) between the segments.
  • Version 7 — Another animation: fading out the separators left and right of the selected segment.
  • Version 8 — The component instantly updates on the Canvas and in the Preview when you change its options or selected segment.
  • Version 9 — The component can share its currently selected option through an event callback property.
  • Version 10 — We add TypeScript for better reusability and make the component respond to common Frame properties.
  • Example prototypes — Five examples of how to use this component in a prototype.

2 comments on “iOS Segmented Control”

  • charliewilliams says:

    Hay Tes,

    How could I have a different colour for the selected segments font?

    I want selected to have a dark background, with a white font, but unselected to have a grey font and a white background…

    Any help would be appreciated mate.

    • Tes Mat says:

      I’ll probably add more properties to the version that’s on the Store. But I first have to check which visual properties you can actually change in the real UISegmentedControl, so that whatever you change in Framer is also possible in a real app.

      For now, you can just copy SegmentedControl_Final.tsx to your project (or copy/paste the code) and make directly make changes to the background of the "Selection Indicator", the color of the "Segment", and the background of the "Segmented control".

Leave a Reply