Advanced

List Box

A list of items from which to choose from.
  • All
  • Option 2
  • Option 3
  • Tag
    Option 4
  • Option 5
    Tag
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

NameTypeDefaultDescription
activenumber
classesstring[]
Additional CSS classes to set on the list element
footerReactNode
Content that is displayed underneath the list of items inside the dropdown
idstring
isLoadingboolean
Whether the items are currenty loading (being fetched). If true, it will render visual loading placeholders in the ListBox
itemsIItemBoxProps[]
The list of items to display as potential choices
multiboolean
noActiveboolean
If true, no highlight will be rendered on active items. An item is active when using keyboard navigation
noResultItemIItemBoxProps{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
selectedstring[]
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
  • itemsThe 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
  • No Items
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