Form

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
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2


3
export default () => (
4
    <FlatSelectConnected
5
        id="flat-select-id"
6
        options={[
7
            {
8
                id: 'item-id-1',
9
                option: {content: 'Option 1'},
10
            },
11
            {
12
                id: 'item-id-2',
13
                option: {content: 'Option 2'},
14
            },
15
            {
16
                id: 'item-id-3',
17
                option: {content: 'Option 3'},
18
                tooltip: {
19
                    title: 'Option 3 tooltip',
20
                    container: 'body',
21
                    placement: 'bottom',
22
                },
23
            },
24
            {
25
                id: 'item-id-4',
26
                option: {content: 'Option 4'},
27
                disabled: true,
28
            },
29
        ]}
30
    />
31
);

Props

NameTypeDefaultDescription
idrequiredstring
The unique identifier of the flat select
optionsrequiredIFlatSelectOptionProps[]
The list of options to show
classNamestring
Additionnal CSS class for the flat select
defaultSelectedOptionIdstring
The id of the initialy selected option
disabledbooleanfalse
Whether the flat select is disabled
groupbooleanfalse
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
  • option–an object representing the value being clicked
optionPickerbooleanfalse
Whether the flat select is an option picker. This makes the visual lighter and fits well inside a dropdown
classesdeprecatedstring[]
use className instead

Examples

Disabled
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2


3
export default () => (
4
    <FlatSelectConnected
5
        id="flat-select-disabled"
6
        options={[
7
            {
8
                id: 'item-disabled-1',
9
                option: {content: 'Option 1'},
10
            },
11
            {
12
                id: 'item-disabled-2',
13
                option: {content: 'Option 2'},
14
            },
15
            {
16
                id: 'item-disabled-3',
17
                option: {content: 'Option 3'},
18
            },
19
        ]}
20
        disabled
21
    />
22
);
Grouped
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2


3
export default () => (
4
    <FlatSelectConnected
5
        id="flat-select-group"
6
        options={[
7
            {
8
                id: 'item-group-1',
9
                option: {content: 'Option 1'},
10
            },
11
            {
12
                id: 'item-group-2',
13
                option: {content: 'Option 2'},
14
            },
15
            {
16
                id: 'item-group-3',
17
                option: {content: 'Option 3'},
18
            },
19
        ]}
20
        group
21
    />
22
);
Option Picker
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2


3
export default () => (
4
    <FlatSelectConnected
5
        id="flat-select-option-picker"
6
        options={[
7
            {
8
                id: 'item-option-picker-1',
9
                option: {content: 'Option 1'},
10
            },
11
            {
12
                id: 'item-option-picker-2',
13
                option: {content: 'Option 2'},
14
            },
15
            {
16
                id: 'item-option-picker-3',
17
                option: {content: 'Option 3'},
18
            },
19
        ]}
20
        optionPicker
21
    />
22
);
Append and prepend
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2
import {ZombieSize16Px} from '@coveord/plasma-react-icons';
3


4
export default () => (
5
    <FlatSelectConnected
6
        id="flat-select-append-prepend-id"
7
        options={[
8
            {
9
                id: 'item-prepend',
10
                option: {content: 'Option 1'},
11
                prepend: {content: <ZombieSize16Px />},
12
            },
13
            {
14
                id: 'item-append',
15
                option: {content: 'Option 2'},
16
                append: {content: <ZombieSize16Px />},
17
            },
18
            {
19
                id: 'item-append2',
20
                option: {content: 'Disabled 3'},
21
                append: {content: <ZombieSize16Px />},
22
                disabled: true,
23
            },
24
        ]}
25
    />
26
);
Icon only
1
import {FlatSelectConnected} from '@coveord/plasma-react';
2
import {Donut64Size24Px} from '@coveord/plasma-react-icons';
3


4
export default () => (
5
    <FlatSelectConnected
6
        id="flat-select-id"
7
        options={[
8
            {
9
                id: 'item-id-1',
10
                option: {content: <Donut64Size24Px />},
11
            },
12
            {
13
                id: 'item-id-2',
14
                option: {content: <Donut64Size24Px />},
15
            },
16
            {
17
                id: 'item-id-3',
18
                option: {content: <Donut64Size24Px />},
19
                disabled: true,
20
            },
21
        ]}
22
    />
23
);

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.
Edit guidelines