Flat Select

A flat select is a group of mutually exclusive buttons aligned horizontally. It is used to allow users to switch between interface displays or binary options.

View source


The unique identifier of the flat select
The list of options to show
Additionnal CSS class for the flat select
The id of the initialy selected option
Whether the flat select is disabled
Whether the flat select options are grouped. Grouped options are displayed closer together
onClick(option: IFlatSelectOptionProps) => void
A callback function that is executed when the user click on a value
  • optionan object representing the value being clicked
Whether the flat select is an option picker. This makes the visual lighter and fits well inside a dropdown
use className instead


Best Practices

A flat select allows users to select a single value among multiple options.

All options must have the same width.

Aim for five or less options.

The effect of the flat select must be immediately visible. For example, a display could change according to the user's selection. If not, consider using a drop-down menu, radio buttons, or checkboxes instead.

You can offer a flat select as a way to switch views, but tabs should be preferred whenever possible. If you do use a flat select for this purpose, ensure that it makes sense in the hierarchy of information of the page. See Flat Select and Tabs for details.


  • Keep titles short, preferably under three words.
  • Make option labels consistent and easy to scan.

Flat Select and Tabs

The flat select component shares similarities with the toggle switch and the tab set.

The flat select and the tab set look similar and are both designed for view switching. However, flat select are suitable for view switching within a pane, whereas tabs are rather used as a navigational control, i.e., moving from one screen to another.

Related Components

  • Radio buttons - When the result doesn't apply immediately.
  • Single select - Alternative to a flat select in the context of a form.
  • Tabs - When in a navigational control context.
Edit guidelines