> ## Documentation Index
> Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# List chrome

> Modifiers for styling List rows, separators, and overall appearance

export const PlatformStatuses = ({statuses}) => {
  const StatusBadge = ({status, label}) => {
    const styles = {
      green: {
        backgroundColor: '#dcfce7',
        color: '#166534'
      },
      orange: {
        backgroundColor: '#fed7aa',
        color: '#9a3412'
      },
      red: {
        backgroundColor: '#fecaca',
        color: '#991b1b'
      },
      gray: {
        backgroundColor: '#f3f4f6',
        color: '#4b5563'
      }
    };
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      padding: '0.125rem 0.625rem',
      borderRadius: '9999px',
      fontSize: '0.875rem',
      fontWeight: '500'
    };
    const colorStyle = styles[status] || styles.green;
    return <span style={{
      ...baseStyle,
      ...colorStyle
    }}>
        {label || status}
      </span>;
  };
  const STATUS_CONFIG = {
    supported: {
      label: "Supported",
      color: "green"
    },
    partial: {
      label: "Partial",
      color: "orange"
    },
    "not-implemented": {
      label: "Not Implemented",
      color: "gray"
    }
  };
  const renderCard = (platform, value) => {
    if (!value) return null;
    const {status, note} = typeof value === "string" ? {
      status: value
    } : value;
    const config = STATUS_CONFIG[status];
    if (!config) return null;
    const titleMap = {
      ios: "SwiftUI",
      android: "Jetpack Compose",
      web: "Web"
    };
    return <Card key={platform} title={titleMap[platform] || platform}>
          <StatusBadge status={config.color} label={config.label} />
          {note && <div style={{
      marginTop: '0.5rem',
      fontSize: '0.875rem',
      color: '#6b7280'
    }}>
              {note}
            </div>}
      </Card>;
  };
  if (statuses == null) {
    return null;
  }
  return <Columns cols="3">
      {Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
    </Columns>;
};

These modifiers style a [List](/bindjs/components/scrolling-and-lists#list) and its rows. `listStyle` sets the overall list appearance; `listRowBackground` and `listRowSeparator` adjust individual row chrome.

`listStyle` is applied to the `List` itself; the row modifiers are applied to each item inside the list, not to the list container.

## listStyle

Sets the visual style of a `List`.

```typescript theme={null}
.listStyle(style: "automatic" | "plain" | "insetGrouped" | "grouped" | "inset" | "sidebar"): Component
```

<ParamField path="style" type="string" required>
  The list style to apply:

  * `"automatic"` -- the platform default style
  * `"plain"` -- a plain list with no section styling
  * `"insetGrouped"` -- grouped sections with inset rounded corners (default on iOS)
  * `"grouped"` -- grouped sections with full-width backgrounds
  * `"inset"` -- plain list with inset margins
  * `"sidebar"` -- optimized for sidebar navigation
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "partial", note: "The inset and sidebar styles render as plain" },
web: "not-implemented",
}}
/>

**Plain list**

```typescript theme={null}
List([
    ForEach(items, (item) =>
        Text(item.name)
    )
]).listStyle("plain")
```

**Grouped list with sections**

```typescript theme={null}
List([
    Section({ header: Text("Fruits") }, [
        Text("Apple"),
        Text("Banana"),
        Text("Cherry")
    ]),
    Section({ header: Text("Vegetables") }, [
        Text("Carrot"),
        Text("Broccoli")
    ])
]).listStyle("insetGrouped")
```

**Sidebar style**

```typescript theme={null}
List([
    ForEach(menuItems, (item) =>
        Label({ title: item.title, systemImage: item.icon })
    )
]).listStyle("sidebar")
```

## listRowBackground

Sets the background view for a list row.

```typescript theme={null}
.listRowBackground(content: Component): Component
```

<ParamField path="content" type="Component" required>
  The component to display as the row's background.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: "not-implemented",
}}
/>

**Colored row background**

Apply to content inside a [List](/bindjs/components/scrolling-and-lists#list)'s ForEach.

```typescript theme={null}
List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowBackground(Color("blue").opacity(0.1))
    )
])
```

**Alternating row backgrounds**

```typescript theme={null}
List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowBackground(
                index % 2 === 0
                    ? Color("gray").opacity(0.1)
                    : Color("white")
            )
    )
])
```

<Note>
  This modifier should be applied to the content views inside a `List`, not to the `List` itself. The background fills the entire row area, including under any separators.
</Note>

## listRowSeparator

Controls the visibility of list row separators.

```typescript theme={null}
.listRowSeparator(visibility: "hidden" | "visible"): Component
```

<ParamField path="visibility" type="&#x22;hidden&#x22; | &#x22;visible&#x22;" required>
  Whether the separator line below this row is visible or hidden.
</ParamField>

<PlatformStatuses
  statuses={{
ios: { status: "supported" },
android: { status: "supported" },
web: "not-implemented",
}}
/>

**Hiding separators**

```typescript theme={null}
List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowSeparator("hidden")
    )
])
```

**Selectively hiding separators**

```typescript theme={null}
List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowSeparator(
                index === items.length - 1
                    ? "hidden"
                    : "visible"
            )
    )
])
```

## See also

* [List](/bindjs/components/scrolling-and-lists#list) — the list container component
* [Scroll chrome](/bindjs/modifiers/scroll-chrome) — `scrollContentBackground` and other scroll-level modifiers
* [Section](/bindjs/components/layout-stacks#section) — group rows with header and footer


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