List

Basic

Sizes

• List supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

With Icons

• We supports icons from the @ocean-network-express/magenta-ui/icons package.

Interactive

• Below is an interactive demo that lets you explore the visual results of the different props:

Selected ListItem

• You can set a ListItem as selected by passing the selected prop.

Active ListItem

• You can set a ListItem as active by passing the active prop.

Grouped list

List control

• ListItem could using along with Checkbox component, see example below:

Disabled

• Disabled state can be enabled by setting disabled prop to true.

List Empty

List Loading