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

# Group Members

> Scrollable list of members for a specific group with role-based actions like kick, ban, and scope change.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatGroupMembers",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatGroupMembers } from \"@cometchat/chat-uikit-react\";",
    "description": "Scrollable list of members for a specific group with role-based actions like kick, ban, and scope change.",
    "cssRootClass": ".cometchat-group-members",
    "primaryOutput": {
      "prop": "onItemClick",
      "type": "(member: CometChat.GroupMember) => void"
    },
    "props": {
      "data": {
        "group": {
          "type": "CometChat.Group",
          "default": "none (required)",
          "note": "The group whose members to display"
        },
        "groupMemberRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "SDK default (30 per page)",
          "note": "Pass the builder instance, not the result of .build()"
        },
        "searchRequestBuilder": {
          "type": "CometChat.GroupMembersRequestBuilder",
          "default": "undefined"
        },
        "searchKeyword": {
          "type": "string",
          "default": "undefined"
        }
      },
      "callbacks": {
        "onItemClick": "(member: CometChat.GroupMember) => void",
        "onSelect": "(member: CometChat.GroupMember, selected: boolean) => void",
        "onError": "((error: CometChat.CometChatException) => void) | null",
        "onEmpty": "() => void",
        "onBack": "() => void"
      },
      "visibility": {
        "hideUserStatus": { "type": "boolean", "default": false },
        "hideSearch": { "type": "boolean", "default": false },
        "hideKickMemberOption": { "type": "boolean", "default": false },
        "hideBanMemberOption": { "type": "boolean", "default": false },
        "hideScopeChangeOption": { "type": "boolean", "default": false },
        "showScrollbar": { "type": "boolean", "default": false }
      },
      "selection": {
        "selectionMode": {
          "type": "CometChatGroupMembersSelectionMode",
          "values": ["'none'", "'single'", "'multiple'"],
          "default": "'none'"
        }
      },
      "viewSlots": {
        "itemView": "(member: CometChat.GroupMember) => ReactNode",
        "leadingView": "(member: CometChat.GroupMember) => ReactNode",
        "titleView": "(member: CometChat.GroupMember) => ReactNode",
        "subtitleView": "(member: CometChat.GroupMember) => ReactNode",
        "trailingView": "(member: CometChat.GroupMember) => ReactNode",
        "headerView": "ReactNode",
        "loadingView": "ReactNode",
        "emptyView": "ReactNode",
        "errorView": "ReactNode",
        "options": "(member: CometChat.GroupMember) => CometChatGroupMemberOption[]"
      }
    },
    "events": [],
    "eventsReceived": [
      {
        "name": "ui:group/member-added",
        "payload": "{ group: CometChat.Group, members: CometChat.User[], messages: CometChat.BaseMessage[] }",
        "description": "Adds new members to the list"
      },
      {
        "name": "ui:group/member-kicked",
        "payload": "{ group: CometChat.Group, user: CometChat.User, message: CometChat.BaseMessage }",
        "description": "Removes the kicked member from the list"
      },
      {
        "name": "ui:group/member-banned",
        "payload": "{ group: CometChat.Group, user: CometChat.User, message: CometChat.BaseMessage }",
        "description": "Removes the banned member from the list"
      },
      {
        "name": "ui:group/member-scope-changed",
        "payload": "{ group: CometChat.Group, user: CometChat.User, newScope: string }",
        "description": "Updates the member's scope/role display"
      },
      {
        "name": "ui:group/ownership-changed",
        "payload": "{ group: CometChat.Group, newOwner: CometChat.User, previousOwnerUid: string }",
        "description": "Updates new owner's scope to owner and demotes previous owner to admin"
      }
    ],
    "sdkListeners": [
      "onGroupMemberJoined",
      "onGroupMemberLeft",
      "onGroupMemberKicked",
      "onGroupMemberBanned",
      "onGroupMemberScopeChanged",
      "onMemberAddedToGroup"
    ],
    "types": {
      "CometChatGroupMemberOption": {
        "id": "string",
        "title": "string",
        "iconURL": "string | undefined",
        "onClick": "(member: CometChat.GroupMember) => void"
      },
      "CometChatGroupMembersSelectionMode": "'none' | 'single' | 'multiple'"
    }
  }
  ```
</Accordion>

## Overview

`CometChatGroupMembers` is a list component that renders all members of a specific group. It provides role-based actions (kick, ban, scope change) for admins and moderators, and emits the selected `CometChat.GroupMember` via `onItemClick`. Use it inside group details panels or as a standalone member management view.

<Info>
  **Live Preview** — interact with the default group members list.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-groups-cometchat-group-members--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-groups-cometchat-group-members--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "700px", border: "1px solid #e0e0e0"}} title="CometChat Group Members — Default" allow="clipboard-write" />

The component handles:

* Paginated fetching with infinite scroll
* Real-time membership updates (joins, leaves, kicks, bans, scope changes)
* Search filtering
* Role-based action menus (kick, ban, change scope)
* Selection mode (single/multiple)

***

## Usage

### Flat API

```tsx theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

function MemberList({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers
      group={group}
      onItemClick={(member) => {
        console.log("Selected member:", member.getName());
      }}
    />
  );
}
```

### Compound Composition

```tsx theme={null}
import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

function MemberList({ group }: { group: CometChat.Group }) {
  return (
    <CometChatGroupMembers.Root group={group} onItemClick={handleClick} onBack={goBack}>
      <CometChatGroupMembers.Header title="Members" />
      <CometChatGroupMembers.SearchBar placeholder="Search members..." />
      <CometChatGroupMembers.LoadingState />
      <CometChatGroupMembers.ErrorState />
      <CometChatGroupMembers.EmptyState>
        <p>No members found.</p>
      </CometChatGroupMembers.EmptyState>
      <CometChatGroupMembers.List />
    </CometChatGroupMembers.Root>
  );
}
```

### Group Details Example

```tsx theme={null}
import { useState } from "react";
import { CometChat } from "@cometchat/chat-sdk-javascript";
import {
  CometChatGroupMembers,
  CometChatMessages,
} from "@cometchat/chat-uikit-react";

function GroupDetailsPanel({ group }: { group: CometChat.Group }) {
  const [selectedMember, setSelectedMember] = useState<
    CometChat.GroupMember | undefined
  >();

  return (
    <div style={{ display: "flex", height: "100vh" }}>
      <div style={{ width: 320 }}>
        <CometChatGroupMembers
          group={group}
          onItemClick={(member) => setSelectedMember(member)}
          onBack={() => navigateBack()}
        />
      </div>
      {selectedMember && (
        <div style={{ flex: 1 }}>
          {/* Show member profile or start DM */}
        </div>
      )}
    </div>
  );
}
```

***

## Filtering

Pass a `CometChat.GroupMembersRequestBuilder` to `groupMemberRequestBuilder` to control which members load. Pass the builder instance — not the result of `.build()`. Refer to [GroupMembersRequestBuilder](/sdk/javascript/retrieve-group-members) for the full builder API.

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  groupMemberRequestBuilder={
    new CometChat.GroupMembersRequestBuilder(group.getGuid())
      .setLimit(15)
      .setScopes(["admin", "moderator"])
  }
/>
```

### Search

The component includes a built-in search bar. When the user types, it fetches matching members from the server. For custom search behavior, pass a `searchRequestBuilder`:

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  searchRequestBuilder={
    new CometChat.GroupMembersRequestBuilder(group.getGuid())
      .setLimit(30)
      .setSearchKeyword("")
  }
/>
```

### Filter Recipes

| Recipe              | Code                                                                               |
| ------------------- | ---------------------------------------------------------------------------------- |
| Only admins         | `new CometChat.GroupMembersRequestBuilder(guid).setScopes(["admin"])`              |
| Admins & moderators | `new CometChat.GroupMembersRequestBuilder(guid).setScopes(["admin", "moderator"])` |
| Limit page size     | `new CometChat.GroupMembersRequestBuilder(guid).setLimit(10)`                      |

***

## Actions and Events

### Callback Props

| Prop          | Signature                                                    | Fires when                                  |
| ------------- | ------------------------------------------------------------ | ------------------------------------------- |
| `onItemClick` | `(member: CometChat.GroupMember) => void`                    | User clicks a member item                   |
| `onSelect`    | `(member: CometChat.GroupMember, selected: boolean) => void` | Member selected/deselected (selection mode) |
| `onError`     | `((error: CometChat.CometChatException) => void) \| null`    | SDK error occurs                            |
| `onEmpty`     | `() => void`                                                 | List is empty after initial fetch           |
| `onBack`      | `() => void`                                                 | Back button is clicked                      |

### Events Emitted

This component does not emit any UI events directly. Kick, ban, and scope change actions are handled by internal action handlers that publish their own events.

### Events Received

UI events this component subscribes to (published by other components):

| Event                           | Payload                                 | Behavior                                                                           |
| ------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------- |
| `ui:group/member-added`         | `{ group, members, messages }`          | Adds new members to the list                                                       |
| `ui:group/member-kicked`        | `{ group, user, message }`              | Removes the kicked member from the list                                            |
| `ui:group/member-banned`        | `{ group, user, message }`              | Removes the banned member from the list                                            |
| `ui:group/member-scope-changed` | `{ group, user, newScope }`             | Updates the member's scope/role display                                            |
| `ui:group/ownership-changed`    | `{ group, newOwner, previousOwnerUid }` | Updates the new owner's scope to "owner" and demotes the previous owner to "admin" |

### SDK Listeners (Automatic)

These SDK listeners are attached internally. The component updates its state automatically — no manual subscription needed:

* Groups: `onGroupMemberJoined`, `onGroupMemberLeft`, `onGroupMemberKicked`, `onGroupMemberBanned`, `onGroupMemberScopeChanged`, `onMemberAddedToGroup`

***

## Customization

### View Props

Use view props to replace sections of the default UI while keeping the component's behavior intact:

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  headerView={<MyCustomHeader />}
  itemView={(member) => <MyCustomMemberItem member={member} />}
  emptyView={<EmptyState />}
  loadingView={<Skeleton />}
  errorView={<ErrorBanner />}
/>
```

| Slot           | Signature               | Replaces                  |
| -------------- | ----------------------- | ------------------------- |
| `itemView`     | `(member) => ReactNode` | Entire member row         |
| `leadingView`  | `(member) => ReactNode` | Avatar section            |
| `titleView`    | `(member) => ReactNode` | Member name               |
| `subtitleView` | `(member) => ReactNode` | Status / role text        |
| `trailingView` | `(member) => ReactNode` | Scope badge + action menu |
| `headerView`   | `ReactNode`             | Header area               |
| `loadingView`  | `ReactNode`             | Loading shimmer           |
| `emptyView`    | `ReactNode`             | Empty state               |
| `errorView`    | `ReactNode`             | Error state               |

#### itemView

Replace the entire list item row.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/lFF45O1CcDkVMfu4/images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png?fit=max&auto=format&n=lFF45O1CcDkVMfu4&q=85&s=b6aa0615ee28e33f0e85cac86a4906c6" width="1280" height="800" data-path="images/a4ba8be1-group_members_listitemview_default_web_screens-5b8840bd6f3ce2799707ce7ea2951e89.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/k82rLv-mRy38q-bk/images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png?fit=max&auto=format&n=k82rLv-mRy38q-bk&q=85&s=2e566af412cb4df1d0eb38d33756e141" width="1280" height="800" data-path="images/e0d9b4dc-group_members_listitemview_custom_web_screens-c804cdfd10e7e040c95f65ecfa045421.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatAvatar,
      CometChatGroupMembers,
    } from "@cometchat/chat-uikit-react";

    function CustomItemViewMembers({ group }: { group: CometChat.Group }) {
      const getItemView = (member: CometChat.GroupMember) => {
        const scope = member.getScope();
        return (
          <div className="group-member-list-item">
            <div className="group-member-list-item__avatar">
              <CometChatAvatar.Root image={member.getAvatar()} name={member.getName()}>
                <CometChatAvatar.Image />
                <CometChatAvatar.Initials />
              </CometChatAvatar.Root>
            </div>
            <div className="group-member-list-item__content">
              <div className="group-member-list-item__content-name">{member.getName()}</div>
              <div className={`group-member-list-item__content-tag group-member-list-item__content-tag-${scope}`}>
                {scope}
              </div>
            </div>
          </div>
        );
      };

      return <CometChatGroupMembers group={group} itemView={getItemView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .group-member-list-item {
      display: flex;
      min-width: 240px;
      padding: 8px 16px;
      align-items: center;
      gap: 12px;
      background: #fff;
    }

    .group-member-list-item__content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .cometchat-avatar, .cometchat-avatar__image {
      border-radius: 10px;
    }

    .group-member-list-item__content-name {
      overflow: hidden;
      color: #141414;
      text-overflow: ellipsis;
      font: 500 16px Roboto;
    }

    .group-member-list-item__content-tag {
      display: flex;
      padding: 4px 12px;
      border-radius: 1000px;
      background: #edeafa;
      color: #6852d6;
      font: 400 12px Roboto;
    }

    .group-member-list-item__content-tag-owner {
      background: #6852d6;
      color: #fff;
    }

    .group-member-list-item__content-tag-admin {
      border: 1px solid #6852d6;
    }

    .group-member-list-item__content-tag-participant {
      display: none;
    }
    ```
  </Tab>
</Tabs>

#### subtitleView

Replace the subtitle text. Joined date example.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/iIeExfBhmmmkVYg_/images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=iIeExfBhmmmkVYg_&q=85&s=97ed97c1fab919420ffd6997956df484" width="1280" height="800" data-path="images/61f20b67-group_members_subtitleview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/Esb0GoP81F5eUfZq/images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png?fit=max&auto=format&n=Esb0GoP81F5eUfZq&q=85&s=b41c6205c894bd25233c3a9b69a15be6" width="1280" height="800" data-path="images/923f8e60-group_members_subtitleview_custom_web_screens-805d87b822b312ce9afd8aaee10ae20d.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

    function SubtitleMembers({ group }: { group: CometChat.Group }) {
      const getSubtitleView = (member: CometChat.GroupMember) => {
        const date = new Date(member.getJoinedAt() * 1000).toLocaleDateString();
        return <div className="group-member-subtitle">Joined: {date}</div>;
      };

      return <CometChatGroupMembers group={group} subtitleView={getSubtitleView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .group-member-subtitle {
      overflow: hidden;
      color: #727272;
      text-overflow: ellipsis;
      white-space: nowrap;
      font: 400 14px Roboto;
    }
    ```
  </Tab>
</Tabs>

#### trailingView

Replace the right section. Scope tag example.

Default:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/W03Ri2VAJwEo4Zob/images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png?fit=max&auto=format&n=W03Ri2VAJwEo4Zob&q=85&s=7b36d5151a5e9e126272e0330c30d291" width="1280" height="800" data-path="images/77b0d08c-group_members_tailview_default_web_screens-9f5cd5b191f8d3dfdec49a6cd0997c55.png" />
</Frame>

Customized:

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/JoK2O2F7IYCQF1_g/images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png?fit=max&auto=format&n=JoK2O2F7IYCQF1_g&q=85&s=40379ae1e87d3f9dbe4ef3cb425af8c3" width="1280" height="800" data-path="images/1c4e58ee-group_members_tailview_custom_web_screens-055d509a3005e4999becda952d9001e3.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import { CometChatGroupMembers } from "@cometchat/chat-uikit-react";

    function TrailingViewMembers({ group }: { group: CometChat.Group }) {
      const getTrailingView = (member: CometChat.GroupMember) => {
        return (
          <div className="group-member-scope-tag">
            {member.getScope()}
          </div>
        );
      };

      return <CometChatGroupMembers group={group} trailingView={getTrailingView} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .group-member-scope-tag {
      display: flex;
      padding: 4px 12px;
      border-radius: 1000px;
      background: #edeafa;
      color: #6852d6;
      font: 400 12px Roboto;
    }
    ```
  </Tab>
</Tabs>

#### headerView

Replace the entire header bar.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/FQNeiVxajtzWdB3i/images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png?fit=max&auto=format&n=FQNeiVxajtzWdB3i&q=85&s=387b88ddc54472d1a07f7e1aeca08fa0" width="1280" height="330" data-path="images/b33f809d-group_member_headerview-234678815906bbb7e26ae2bddb71f972.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatGroupMembers,
      CometChatButton,
      useLocale,
    } from "@cometchat/chat-uikit-react";

    function CustomHeaderMembers({ group }: { group: CometChat.Group }) {
      const { getLocalizedString } = useLocale();

      return (
        <CometChatGroupMembers
          group={group}
          headerView={
            <div className="group-members__header">
              <div className="group-members__header__title">
                {getLocalizedString("group_members")}
              </div>
              <CometChatButton.Root onClick={() => { /* handle click */ }}>
                <CometChatButton.Icon />
              </CometChatButton.Root>
            </div>
          }
        />
      );
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .group-members__header {
      display: flex;
      width: 100%;
      padding: 8px 16px;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-radius: 10px;
      border: 1px solid #e8e8e8;
      background: #edeafa;
    }

    .group-members__header__title {
      overflow: hidden;
      color: #141414;
      text-overflow: ellipsis;
      font: 700 24px Roboto;
    }
    ```
  </Tab>
</Tabs>

#### options

Replace the context menu / hover actions on each member item.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-agent-in-group-react-v6/W03Ri2VAJwEo4Zob/images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png?fit=max&auto=format&n=W03Ri2VAJwEo4Zob&q=85&s=9a36133e87b20e5387e28df012f3b129" width="1280" height="539" data-path="images/7ce43a63-group_members_options_web_screens-c7a97fe4857af207bf473eb087d15f65.png" />
</Frame>

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    import { CometChat } from "@cometchat/chat-sdk-javascript";
    import {
      CometChatGroupMembers,
      type CometChatGroupMemberOption,
    } from "@cometchat/chat-uikit-react";

    function CustomOptionsMembers({ group }: { group: CometChat.Group }) {
      const getOptions = (member: CometChat.GroupMember): CometChatGroupMemberOption[] => [
        {
          id: "kick",
          title: "Kick User",
          onClick: (m) => { /* kick logic */ },
        },
      ];

      return <CometChatGroupMembers group={group} options={getOptions} />;
    }
    ```
  </Tab>

  <Tab title="CSS">
    ```css theme={null}
    .cometchat-group-members .cometchat-menu-list__main-menu-item-icon {
      background: #f44649;
    }

    .cometchat-group-members .cometchat-menu-list__menu {
      background: transparent;
      box-shadow: none;
    }
    ```
  </Tab>
</Tabs>

### Compound Composition

For full layout control, use sub-components. Omit any sub-component to hide it:

```tsx theme={null}
<CometChatGroupMembers.Root group={group} onItemClick={handleClick}>
  {/* No Header or SearchBar — they won't render */}
  <CometChatGroupMembers.List />
</CometChatGroupMembers.Root>
```

Available sub-components:

| Sub-component  | Description                    | Props                                                      | Flat API equivalent |
| -------------- | ------------------------------ | ---------------------------------------------------------- | ------------------- |
| `Root`         | Context provider and container | All Root props + `children`                                | —                   |
| `List`         | Scrollable member list         | `itemView`                                                 | `itemView`          |
| `Item`         | Individual member row          | `leadingView`, `titleView`, `subtitleView`, `trailingView` | Per-item view props |
| `Header`       | Header area                    | `title`, `children`                                        | `headerView`        |
| `SearchBar`    | Search input                   | `placeholder`                                              | —                   |
| `EmptyState`   | Empty state                    | `children`                                                 | `emptyView`         |
| `ErrorState`   | Error state                    | `children`                                                 | `errorView`         |
| `LoadingState` | Loading shimmer                | `children`                                                 | `loadingView`       |

### CSS Styling

Override design tokens on the component selector:

```css theme={null}
.cometchat-group-members {
  --cometchat-background-color-01: #1a1a2e;
  --cometchat-text-color-primary: #ffffff;
}

.cometchat-group-members__item-scope {
  color: var(--cometchat-primary-color);
  font-weight: 600;
}
```

***

## Props

All props are optional unless marked **Required**.

<Note>
  View slot props (`headerView`, `loadingView`, `emptyView`, `errorView`, `itemView`, `leadingView`, `titleView`, `subtitleView`, `trailingView`) are convenience props available only on the flat API. The search input is the `SearchBar` sub-component (with a `placeholder` prop), not a view slot. In compound composition mode, use the corresponding sub-components directly.
</Note>

***

### group

**Required.** The group whose members to display.

|         |                   |
| ------- | ----------------- |
| Type    | `CometChat.Group` |
| Default | —                 |

***

### groupMemberRequestBuilder

Custom request builder for fetching group members. Controls pagination, filtering, and sorting.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | SDK default (limit 30)                 |

***

### searchRequestBuilder

Custom request builder used specifically when the user searches. Separate from the main builder.

|         |                                        |
| ------- | -------------------------------------- |
| Type    | `CometChat.GroupMembersRequestBuilder` |
| Default | `undefined`                            |

***

### searchKeyword

Initial search keyword to pre-filter members on mount.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

### hideUserStatus

Hide the online/offline status indicator on member avatars.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideSearch

Hide the search bar entirely.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideKickMemberOption

Hide the "Kick Member" option from the action menu (even for admins/owners).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideBanMemberOption

Hide the "Ban Member" option from the action menu (even for admins/owners).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### hideScopeChangeOption

Hide the "Change Scope" option from the action menu (even for admins/owners).

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### showScrollbar

Show the native scrollbar on the member list.

|         |           |
| ------- | --------- |
| Type    | `boolean` |
| Default | `false`   |

***

### selectionMode

Enable selection mode for single or multi-select operations.

|         |                                    |
| ------- | ---------------------------------- |
| Type    | `'none' \| 'single' \| 'multiple'` |
| Default | `'none'`                           |

***

### options

Function that returns context menu options for each member item (shown on hover/swipe). Overrides the default kick/ban/scope options.

|         |                                                                            |
| ------- | -------------------------------------------------------------------------- |
| Type    | `(member: CometChat.GroupMember) => CometChatGroupMemberOption[]`          |
| Default | Default options (kick, ban, change scope — based on logged-in user's role) |

```tsx theme={null}
<CometChatGroupMembers
  group={group}
  options={(member) => [
    {
      id: "message",
      title: "Message Privately",
      iconURL: messageIcon,
      onClick: (m) => openDirectMessage(m),
    },
    {
      id: "remove",
      title: "Remove",
      iconURL: removeIcon,
      onClick: (m) => kickMember(m),
    },
  ]}
/>
```

***

### onItemClick

Callback when a member item is clicked.

|         |                                           |
| ------- | ----------------------------------------- |
| Type    | `(member: CometChat.GroupMember) => void` |
| Default | `undefined`                               |

***

### onSelect

Callback when a member is selected or deselected (only fires in selection mode).

|         |                                                              |
| ------- | ------------------------------------------------------------ |
| Type    | `(member: CometChat.GroupMember, selected: boolean) => void` |
| Default | `undefined`                                                  |

***

### onError

Callback when an SDK error occurs during fetch or real-time operations.

|         |                                                           |
| ------- | --------------------------------------------------------- |
| Type    | `((error: CometChat.CometChatException) => void) \| null` |
| Default | `null`                                                    |

***

### onEmpty

Callback when the member list is empty after the initial fetch completes.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

### onBack

Callback when the back button in the header is clicked.

|         |              |
| ------- | ------------ |
| Type    | `() => void` |
| Default | `undefined`  |

***

## CSS Selectors

| Target         | Selector                                  |
| -------------- | ----------------------------------------- |
| Root container | `.cometchat-group-members`                |
| Header         | `.cometchat-group-members__header`        |
| Search bar     | `.cometchat-group-members__search-bar`    |
| List container | `.cometchat-group-members__list`          |
| Member item    | `.cometchat-group-members__item`          |
| Scope badge    | `.cometchat-group-members__item-scope`    |
| Empty state    | `.cometchat-group-members__empty-state`   |
| Error state    | `.cometchat-group-members__error-state`   |
| Loading state  | `.cometchat-group-members__loading-state` |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Groups" icon="users" href="/ui-kit/react/components/groups">
    Browse and select groups
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>