You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

List Box

A list of items from which to choose from.

View source

1
import {Badge, BadgeType, ListBox} from '@coveord/plasma-react';
2

3
export default () => (
4
    <div style={{width: 300}}>
5
        <ListBox
6
            items={[
7
                {
8
                    value: '1',
9
                    displayValue: 'All',
10
                },
11
                {
12
                    value: 'soDivider',
13
                    divider: true,
14
                },
15
                {
16
                    value: '2',
17
                    displayValue: 'Option 2',
18
                    disabled: true,
19
                },
20
                {value: '3', displayValue: 'Option 3'},
21
                {
22
                    value: '4',
23
                    displayValue: 'Option 4',
24
                    prepend: {content: <Badge label="Tag" isSmall type={BadgeType.New} />},
25
                },
26
                {
27
                    value: '5',
28
                    displayValue: 'Option 5',
29
                    append: {content: <Badge label="Tag" isSmall type={BadgeType.New} />},
30
                },
31
            ]}
32
        />
33
    </div>
34
);

Props

Name	Type	Default	Description
`active`	`number`
`classes`	`string[]`		Additional CSS classes to set on the list element
`footer`	`ReactNode`		Content that is displayed underneath the list of items inside the dropdown
`id`	`string`
`isLoading`	`boolean`		Whether the items are currenty loading (being fetched). If true, it will render visual loading placeholders in the ListBox
`items`	`IItemBoxProps[]`		The list of items to display as potential choices
`multi`	`boolean`
`noActive`	`boolean`		If true, no highlight will be rendered on active items. An item is active when using keyboard navigation
`noResultItem`	`IItemBoxProps`	`{value: 'No Items'}`	The content shown in the list of items when there are no items to display.
`onDestroy`	`() => void`
`onOptionClick`	`(option: IItemBoxProps, index?: number) => void`
`onRender`	`() => void`
`selected`	`string[]`
`wrapItems`	`(items: ReactNode) => ReactNode`		Useful if you need to wrap the list of items with another component. We use this when combining with the InfiniteScroll HOC items–The list of items in the form of a React Component

Examples

Loading

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

3
export default () => (
4
    <div style={{width: 300}}>
5
        <ListBox isLoading />
6
    </div>
7
);

Empty state

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

3
export default () => (
4
    <div style={{width: 300}}>
5
        <ListBox />
6
    </div>
7
);

List with a footer

1
import {ListBox} from '@coveord/plasma-react';
2
import {ClockSize24Px} from '@coveord/plasma-react-icons';
3

4
export default () => (
5
    <div style={{width: 300}}>
6
        <ListBox
7
            items={[
8
                {
9
                    value: '1',
10
                    displayValue: 'Option 1',
11
                },
12
                {
13
                    value: '2',
14
                    displayValue: 'Option 2',
15
                },
16
                {
17
                    value: '3',
18
                    displayValue: 'Option 3',
19
                },
20
            ]}
21
            footer={
22
                <div className="select-footer">
23
                    <ClockSize24Px />
24
                    Look at my Footer
25
                </div>
26
            }
27
        />
28
    </div>
29
);

No guidelines exist for ListBox yet.

Create guidelines