An interactive segmented control with multiple states and interaction options included.
A segmented control is a set of two or more sections. Each of the sections or segments functions as its own button. Within the control, each segment should be equal in width. Like individual buttons, each segment can contain text or even images. Segmented controls are often used to toggle between different views.
What is the segmented control?
The segmented control is used in many Apple products. The iOS segmented control can be seen in the Maps app when toggling between satellite, transit, and map views as it provides an easy and user-friendly way to control the app. To ensure your segmented control gives the ultimate user experience, it’s important to limit the number of segments so that each button maintains a large enough width to be tapped on any device. It’s also good to keep in mind, the contents of each segment. Although segments can contain both text and images, inconsistent content can lead to a hard-to-read and confusing interface. And finally, always check that the contrast between the text and the background of your segment is high enough so that your options remain legible.
How to use the Segmented Control component
To use the Segmented Control component in Framer for your designs, search for Segmented Control in the Insert Menu or go to the Interface category, then press Insert. The Segmented Control component has eighteen different properties to customize every aspect of the control. This way you can adapt it seamlessly to your brand guidelines without having to design your own from scratch. Text properties include Text Color, Font Size, and Font. And the control properties include Direction, Selected, Variants, Bg Color, Border Color, Width, Shadow, Slide, Transition, Radius, Gap, and Dividers.