Flat Select
Props
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 |
Examples
Disabled
Grouped
Option Picker
Append and prepend
Icon only
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.
Labeling
- 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.