> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-013b37f0.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# List Item
`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 |
```swift theme={null}
// syntax for set(avatarURL: String)
listItem.set(avatarURL: "Avatar URL here")
// syntax for set(avatarName: String)
listItem.set(avatarName: "George Alan")
```
***
### 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 |
```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)
```
***
### 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 |
```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)
```
***
### 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` |
```swift theme={null}
// syntax for set(background: [UIColor])
listItem.set(background: [UIColor(hex:"FF606D").cgColor])
```
***
### 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`. |
```swift theme={null}
// syntax for set(title: String)
listItem.set(title: user.name)
```
***
### 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`**. |
```swift theme={null}
// syntax for set(subTitle: UIView?)
let customSubtitleView = SubtitleView()
listItem.set(subTitle: customSubtitleView)
```
***
### 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`**. |
```swift theme={null}
// syntax for set(tail: UIView?)
let tailView = TailView()
listItem.set(tail: tailView)
```
***
### 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`**. |
```swift theme={null}
// syntax for set(customView: UIView?)
let customView = CustomView()
listItem.set(customView: customView)
```
***
### 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 |
```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)
```
***
### Allow Selection
This enables the selection mode for list item
| Method | Description |
| ------------------------ | --------------------------------------- |
| `allow(selection: Bool)` | Sets the selection mode for `ListItem`. |
```swift theme={null}
// syntax for listItem.set(customView: customView)
listItem.allow(selection: true)
```
***