> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# List Item

> List Item — CometChat documentation.

`CometChatListItem` contains one to three lines of text optionally flanked by icons or other views, such as `CometChatAvatar`, `CometChatDate` or `Text`. `CometChatAvatar` will always be shown in the leading view therefore either one among the `avatarURL` or `avatarName` must be provided. The icons (or other widgets) for the list item are defined with the `tailView` parameter. The first line of text is optional and is specified with `title`. The value of subtitle is also optional, will occupy the space allocated for an additional line of text or some other view.

***

## Methods

### Set Avatar

| Method | Description |
| - | - |
| set(avatarURL: String) | Sets the avatarURL to display image |
| set(avatarName: String) | Sets the avatar name to show initials |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(avatarURL: String)
    listItem.set(avatarURL: "Avatar URL here")

    // syntax for set(avatarName: String)
    listItem.set(avatarName: "George Alan")
    ```
  </Tab>
</Tabs>

***

### Set Avatar Style

User can style the avatar component in list item with the help of properties provided by the `AvatarStyle`.

| Method | Description |
| - | - |
| `set(background: UIColor)` | Sets the background color for Avatar |
| `set(cornerRadius: CometChatCornerStyle)` | Sets the corner radius for Avatar |
| `set(borderWidth: CGFloat)` | Sets the border width for Avatar |
| `set(borderColor: UIColor)` | Sets the border color for Avatar |
| `set(textFont: UIFont)` | Sets the text font for Avatar |
| `set(textColor: UIColor)` | Sets the text color for Avatar |
| `set(outerViewWidth: CGFloat)` | Sets the outerView width for Avatar |
| `set(outerViewSpacing: CGFloat)` | Sets the outerView spacing for Avatar |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  AvatarStyle object
    let avatarStyle = AvatarStyle()

    // Creating  Modifying the propeties of avatar
     avatarStyle.set(background: .red)
                .set(textFont: .systemFont(ofSize: 18))
                .set(textColor: .white)
                .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
                .set(borderColor: .white)
                .set(borderWidth: 5)
                .set(outerViewWidth: 3)
                .set(outerViewSpacing: 3)

    // Setting the avatar style
    listItem.set(avatarStyle: avatarStyle)
    ```
  </Tab>
</Tabs>

***

### Set StatusIndicator Style

User can style the status indicator component in list item with the help of properties provided by the `StatusIndicatorStyle`.

| Method | Description |
| - | - |
| `set(statusIndicatorIcon: UIImage)` | Sets the icon for status indicator in list item |
| `hide(statusIndicator: Bool)` | Hide/shows the status indicator in list item |
| `set(background: UIColor)` | Sets the background color for status indicator in list item |
| `set(cornerRadius: CometChatCornerStyle)` | Sets the corner radius for status indicator in list item |
| `set(borderWidth: CGFloat)` | Sets the border width for status indicator in list item |
| `set(borderColor: UIColor)` | Sets the border color for status indicator in list item |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  StatusIndicatorStyle object
    let statusIndicatorStyle = StatusIndicatorStyle()

    // Creating  Modifying the propeties of status indicator
    statusIndicatorStyle.set(background: .red)
                .set(cornerRadius: CometChatCornerStyle(cornerRadius: 8.0))
                .set(borderColor: .white)
                .set(borderWidth: 5)

    // Setting the statusIndicatorStyle
    listItem.set(statusIndicatorStyle: statusIndicatorStyle)
    ```
  </Tab>
</Tabs>

***

### Background

The background is a UIView which is present in the backdrop for **`ListItem`**. You can modify the background using the below methods:

| Method | Description |
| - | - |
| `set(background: [UIColor])` | Sets the title font for `ConversationListItem` |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(background: [UIColor])
    listItem.set(background: [UIColor(hex:"FF606D").cgColor])
    ```
  </Tab>
</Tabs>

***

### Set Title

The title is a `UILabel` which specifies a title for **`ListItem`**. You can modify the title using the below methods:

| Method | Description |
| - | - |
| `set(title: String)` | Sets the title for `list item`. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(title: String)
    listItem.set(title: user.name)
    ```
  </Tab>
</Tabs>

***

### Set Subtitle View

The SubTitleView is a UIView that specifies a subTitle for **`ListItem`**. You can modify the title using the below methods:

| Method | Description |
| - | - |
| set(subtitle: UIView) | Sets the subtitle view for **`ListItem`**. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(subTitle: UIView?)

    let customSubtitleView = SubtitleView()
    listItem.set(subTitle: customSubtitleView)
    ```
  </Tab>
</Tabs>

***

### Set Tail View

The TailView is a UIView that specifies a tail for **`ListItem`**. You can modify the title using the below methods:

| Method | Description |
| - | - |
| `set(tail: UIView)` | Sets the tail view for **`ListItem`**. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(tail: UIView?)

    let tailView = TailView()
    listItem.set(tail: tailView)
    ```
  </Tab>
</Tabs>

***

### Set Custom View

The custom view is a UIView that specifies a tail for **`ListItem`**. You can modify the title using the below methods:

| Method | Description |
| - | - |
| `set(customView: UIView)` | Sets the custom view for **`ListItem`**. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for set(customView: UIView?)

    let customView = CustomView()
    listItem.set(customView: customView)
    ```
  </Tab>
</Tabs>

***

### Set ListItem Style

User can style the list item with the help of properties provided by the ListItemStyle.

| Method | Description |
| - | - |
| `set(background: UIColor)` | Sets the background color for ListItem |
| `set(cornerRadius: CometChatCornerStyle)` | Sets the corner radius for ListItem |
| `set(borderWidth: CGFloat)` | Sets the border width for ListItem |
| `set(borderColor: UIColor)` | Sets the border color for ListItem |
| `set(titleColor: UIColor)` | Sets the title color for ListItem |
| `set(titleFont: UIFont)` | Sets the title font for ListItem |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // Creating  ListItemStyle object
    let listItemStyle = ListItemStyle()

    // Creating  Modifying the propeties of list item
     listItemStyle.set(background: .black)
                  .set(titleFont: .systemFont(ofSize: 18))
                  .set(titleColor: .white)
                  .set(cornerRadius: CometChatCornerStyle(cornerRadius: 2.0))
                  .set(borderColor: .white)
                  .set(borderWidth: 5)

    // Setting the list item style
    listItem.set(listItemStyle: listItemStyle)
    ```
  </Tab>
</Tabs>

***

### Allow Selection

This enables the selection mode for list item

| Method | Description |
| - | - |
| `allow(selection: Bool)` | Sets the selection mode for `ListItem`. |

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    // syntax for listItem.set(customView: customView)
    listItem.allow(selection: true)
    ```
  </Tab>
</Tabs>

***


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.