iOS 13 Segmented Control

Tes Mat

Open in Framer X

Overview

A bit of skeuomorphism returned to iPhone’s default UI with the new look of the Segmented Control in iOS 13.

This Framer X version is made to work with Overrides: It will share its currently selected segment through a callback property.

➡️ How to build this component is explained step-by-step in The Framer book

Properties

Property Type Description
Mode boolean Light or Dark mode
Options string[] Names of the (max. 5) segments
Set Current by boolean Set the selected segment by index or name
Current Index number Index of the selected segment
Current Option string Name of the selected segment
Callback property function Event callback property that shares the selected segment

 

GIF: Properties will update dynamically

Mode

  • Name: mode
  • Default value: true (= Light Mode)

You can switch between Light Mode and the new Dark Mode.

Note: The background of the component is always the same color, a transparent gray of which opacity changes (just a bit) when switching between light and dark mode. (I used the segmented control in Apple’s iOS Sketch template as a color reference.)

Options

  • Name: options
  • Default value: ["Cherry", "Kiwi", "Banana", "Mango", "Lemon"]

An array of strings with the names of the (max. 5) segments.

Properties for the currently selected segment

You can set the selected segment by either index number or by name.

Set Current by

  • Name: setCurrentBy
  • Default value: true (select by index)

This property defines whether the value of ‘Current Index’ or ‘Current Option’ will be used to set the selected segment. (The ‘Set current’ property control will show only one of them and hide the other.)

Current Index

  • Name: currentIndex
  • Default value: 0 (first segment)

Sets the selected segment by its index number (between 0 and 4).

Current Option

  • Name: currentOption
  • Default value: "Kiwi" (second segment)

Sets the selected segment by its option name.

Callback property

  • Name: onValueChange(option, index)
  • Default value: null

The callback property will share both the option (as a string) and the index (as a number) of the selected segment.

Override examples using the callback property

How to get the currently selected option:

import { Override, Data } from "framer"

const appState = Data({
    currentOption: null,
})

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            appState.currentOption = option
        },
    }
}

export function CurrentOption(): Override {
    return {
        text: appState.currentOption,
    }
}

GIF: Example prototype showing the current option

How to get the currently selected index:

import { Override, Data } from "framer"

const appState = Data({
    currentIndex: null,
})

export function SegmentedControl(): Override {
    return {
        onValueChange(option, index) {
            appState.currentIndex = index
        },
    }
}

export function CurrentIndex(): Override {
    return {
        text: appState.currentIndex,
    }
}

GIF: Example prototype showing the current index

Example prototypes

I recreated a few iOS screens that use this UI element:

  • The Steps screen in the iPhone Health app
  • Changing the Maps Settings in Apple’s Maps app

➡️ Get them here

GIF: Example prototypes using Overrides

Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree