Name | Type | Default | Description |
---|---|---|---|
id required | string | The unique identifier of the flat select | |
options required | IFlatSelectOptionProps[] | The list of options to show | |
className | string | Additionnal CSS class for the flat select | |
defaultSelectedOptionId | string | The id of the initialy selected option | |
disabled | boolean | false | Whether the flat select is disabled |
group | boolean | false | 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
| |
optionPicker | boolean | false | Whether the flat select is an option picker. This makes the visual lighter and fits well inside a dropdown |
classes deprecated | string[] | use className instead |
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.
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.