The following segment provides instructions for designers and developers regarding the appropriate utilization of this
component in various situations.
Do:
Use to present a set of selectable options at once.Use for selection from 2-5 short and consistent options.Use them over other selection controls to reduce cognitive load.Pair the option with an icon to improve visual recognition use.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 Button or
Select instead).Don't exceed maximum width so the values turn multiline.
