Skip to main content
List.Item

Use the List Item component to build lists that display various content types, such as images, illustrations, labels, and actions.
Each List Item has three sections that can be customized to display different content.

Usage Examples
Structure

The List Item component is divided into three sections:

  1. Left Element: A media type such as an icon, illustration, or avatar.
  2. Middle Section: The main content area, which includes a title, subtitle, and description. This section is mandatory and cannot be empty.
  3. Right Element: Typically used for actions like buttons, toggles, or checkboxes. It can also display a status using the Label component.

Each section supports various content types that can be configured and combined to suit different use cases.

Content Types
Left Element
PropertyComponent
None
Icon
Avatar
Thumbnail
Custom Element
Illustration
Right Element
PropertyComponent
None
Chevron
Icon
Icon+Text
Button
Checkbox
Radio Button
Switch
Label
Custom Element
Chevron+Label
Icon+Label
Text+2 Labels
Text+Badge
Middle Part
PropertyComponent
Title
Title+Subtitle
Title+Subtitle+Description
Title+Subtitle+Custom Element
States
PropertyComponent
Default
Selected
Hidden (not disabled)
Disabled
List FeaturesVarious elements can be added to a list of listItems to provide additional, complementary items.
Add New List Item

Use it to allow the user to add a new item to the list.
Can be placed under/above the list.

Lazy Loader

Triggered by swiping down to load new items.

If trying to load new items in offline mode, show the lazy loader for 2 seconds, followed by the connectivity bar.

Section Headers

Use section headers to organize and divide long lists.
Choose the "sort" type to arrange items alphabetically or numerically and the "date" type to group items by date.

Expandable List

A list can be expandable and collapsible to hide irrelevant content while keeping it accessible if needed.

SpecList item height is dynamic and determined by the content.