# ListHeader

Canonical page: https://docs.ovok.com/native-sdk/guide/components/setting/list-header

Section header component that provides visual separation and labeling for grouped settings. Features dynamic spacing based on position in the list and theme integration for consistent typography.

## Quick Example [#quick-example]

```tsx
import { ListHeader } from "@ovok/native";
import React from "react";

const ListHeaderExample = () => {
  return (
    <ListHeader
      label="Account Settings"
      isFirst={false}
      isLast={false}
      testId="account-header"
    />
  );
};

export default ListHeaderExample;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/setting` API reference](/native-sdk/reference/setting).

## Component Behavior [#component-behavior]

The ListHeader component:

1. **Dynamic Spacing**: Adjusts padding based on position in the list
2. **Typography**: Uses DMSans_700Bold font family for clear hierarchy
3. **Theme Integration**: Respects theme spacing values for consistency
4. **Accessibility boundary**: Provides visual grouping only; add a heading role
   or announcement in the host app if the section needs one

### Spacing Logic [#spacing-logic]

The component applies different spacing based on position:

```tsx
// Top padding: none for first item, theme.spacing(6) for others
paddingTop: !isFirst ? theme.spacing(6) : 0;

// Bottom padding: none for last item, theme.spacing(4) for others
paddingBottom: !isLast ? theme.spacing(4) : 0;
```

This creates proper visual separation between sections while avoiding unnecessary spacing at list boundaries.

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.spacing(6)` - Top spacing between sections (24px by default)
- `theme.spacing(4)` - Bottom spacing after headers (16px by default)

## Related Components [#related-components]

- [SettingList](/native-sdk/guide/components/setting/setting-list/) - Container component that automatically renders ListHeaders
- [SettingListItem](/native-sdk/guide/components/setting/setting-list-item/) - Setting items that appear under headers