Segmented Control Table of Contents

• Usage
• Related components

Usage# The following section provides guidance for designers and developers on how to use this component in different situations. Do: Use to present a set of selectable options at once. Use it for selecting from 2-5 short, consistent options. Use them over other selection controls to reduce cognitive load. Pair options with icons to improve visual recognition. Use icons only when the context meaning is really clear. Use preselection when the result is visible by default. Use with no selection when a selection by the user is necessary to show the result. Use it with a short indication for the unit (such as km, €, %, or $) when possible. Use for horizontal and/or vertical display of options. Don't: Don't use it to filter or navigate content (use Tabs instead). Don't use it for more than 5 options (use the Select component). Don't use it with mixed values (use Radio Group or Select instead). Don't exceed maximum width so the values turn multiline. Related components# Select Radio Button Tabs