StructuredList

A StructuredList can be used to group more complex types of data than the standard Chakra UI List component.

Import#

• StructuredList: The wrapper component that handles default composition.
• StructuredListHeader: A title to indicate a group of items.
• StructuredListItem: The list item container.
• StructuredListIcon: The list item icon.
• StructuredListButton: Component used for interactive items.
• StructuredListCell: Component that displays the item primary and secondary text.

import {
  StructuredList,
  StructuredListHeader,
  StructuredListItem,
  StructuredListIcon,
  StructuredListButton,
  StructuredListCell,
} from '@saas-ui/react'

Usage#

Basic#

Icon#

Header#

Interactive#

You can make the list items interactive by adding a href or onClick prop to the StructuredListItem.

Checkbox#

Switch#

Truncated text#

Sticky header#

Accessibility#

Structured list supports keyboard navigation.