# ListGroup **Category**: native **URL**: https://www.heroui.com/docs/native/components/list-group **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(navigation)/list-group.mdx > A Surface-based container that groups related list items with consistent layout and spacing. *** ## Import ```tsx import { ListGroup } from 'heroui-native'; ``` ## Anatomy ```tsx ... ... ... ``` - **ListGroup**: Surface-based root container that groups related list items. Supports all Surface variants (default, secondary, tertiary, transparent). - **ListGroup.Item**: Pressable horizontal flex-row container for a single item, providing consistent spacing and alignment. - **ListGroup.ItemPrefix**: Optional leading content slot for icons, avatars, or other visual elements. - **ListGroup.ItemContent**: Flex-1 wrapper for title and description, occupying the remaining horizontal space. - **ListGroup.ItemTitle**: Primary text label styled with foreground color and medium font weight. - **ListGroup.ItemDescription**: Secondary text styled with muted color and smaller font size. - **ListGroup.ItemSuffix**: Optional trailing content slot. Renders a chevron-right icon by default; accepts children to override the default icon. ## Usage ### Basic Usage The ListGroup component uses compound parts to create grouped list items with title and description. ```tsx Personal Info Name, email, phone number Payment Methods Visa ending in 4829 ``` ### With Icons Add leading icons using the `ListGroup.ItemPrefix` slot. ```tsx Profile Name, photo, bio Security Password, 2FA ``` ### Title Only Omit `ListGroup.ItemDescription` to display title-only items. ```tsx Wi-Fi Bluetooth ``` ### Surface Variant Apply a different visual variant to the root container. ```tsx Wi-Fi ``` ### Custom Suffix Override the default chevron icon by passing children to `ListGroup.ItemSuffix`. ```tsx Language English Notifications 7 ``` ### Custom Suffix Icon Props Customise the default chevron icon size and color using `iconProps`. ```tsx Storage 12.4 GB of 50 GB used ``` ### With PressableFeedback Wrap items with `PressableFeedback` to add scale and ripple press feedback animations. When using this pattern, pass `onPress` on `PressableFeedback` instead of `ListGroup.Item` and disable the item with `disabled` prop. ```tsx import { ListGroup, PressableFeedback, Separator } from 'heroui-native'; {}}> Appearance Theme, font size, display {}}> Notifications Alerts, sounds, badges ``` ## Example ```tsx import { Ionicons } from '@expo/vector-icons'; import { ListGroup, Separator, useThemeColor } from 'heroui-native'; import { View, Text } from 'react-native'; import { withUniwind } from 'uniwind'; const StyledIonicons = withUniwind(Ionicons); export default function ListGroupExample() { const mutedColor = useThemeColor('muted'); return ( Account Personal Info Name, email, phone number Payment Methods Visa ending in 4829 Preferences Appearance Theme, font size, display Notifications Alerts, sounds, badges ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/list-group.tsx). ## API Reference ### ListGroup | prop | type | default | description | | -------------- | ---------------------------------------------------------- | ----------- | -------------------------------------------------- | | `children` | `React.ReactNode` | - | Children elements to be rendered inside the group | | `variant` | `'default' \| 'secondary' \| 'tertiary' \| 'transparent'` | `'default'` | Visual variant of the underlying Surface container | | `className` | `string` | - | Additional CSS classes for the root container | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### ListGroup.Item | prop | type | default | description | | ------------------- | ----------------- | ------- | ------------------------------------------------------- | | `children` | `React.ReactNode` | - | Children elements to be rendered inside the item | | `className` | `string` | - | Additional CSS classes for the item | | `...PressableProps` | `PressableProps` | - | All standard React Native Pressable props are supported | ### ListGroup.ItemPrefix | prop | type | default | description | | -------------- | ----------------- | ------- | ------------------------------------------------------ | | `children` | `React.ReactNode` | - | Leading content such as icons or avatars | | `className` | `string` | - | Additional CSS classes for the prefix | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### ListGroup.ItemContent | prop | type | default | description | | -------------- | ----------------- | ------- | ------------------------------------------------------ | | `children` | `React.ReactNode` | - | Content area, typically title and description | | `className` | `string` | - | Additional CSS classes for the content area | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### ListGroup.ItemTitle | prop | type | default | description | | -------------- | ----------------- | ------- | -------------------------------------------------- | | `children` | `React.ReactNode` | - | Title text or custom content | | `className` | `string` | - | Additional CSS classes for the title | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### ListGroup.ItemDescription | prop | type | default | description | | -------------- | ----------------- | ------- | -------------------------------------------------- | | `children` | `React.ReactNode` | - | Description text or custom content | | `className` | `string` | - | Additional CSS classes for the description | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | ### ListGroup.ItemSuffix | prop | type | default | description | | -------------- | -------------------- | ------- | ---------------------------------------------------------------------------------- | | `children` | `React.ReactNode` | - | Custom trailing content; overrides the default chevron-right icon when provided | | `className` | `string` | - | Additional CSS classes for the suffix | | `iconProps` | `ListGroupIconProps` | - | Props to customise the default chevron-right icon. Only applies when no children | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported | #### ListGroupIconProps | prop | type | default | description | | ------- | -------- | ------------------- | ---------------------------------- | | `size` | `number` | `16` | Size of the chevron icon in pixels | | `color` | `string` | theme `muted` color | Color of the chevron icon |