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
A callback function that is executed when the user click on a value
Whether the flat select is an option picker. This makes the visual lighter and fits well inside a dropdown
use className instead
Append and prepend
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.
- 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.