# Section

> A grouping wrapper for a set of related items inside a listbox, menu, or combobox — a native `<section>` element carrying the small block-axis padding that sets one group apart from the next.

```ts
import { Section } from "@sdxc/ui";
```

Renders its children inside a `<section>` element with small block-axis
padding, separating one group of items from its siblings inside a
listbox, menu, or combobox; pair it with a `Header` to label the group.

## Examples

```tsx
<Section aria-labelledby="account-heading">
	<Header id="account-heading">{t("settings.account")}</Header>
	<ListBox.Item id="profile">{t("settings.profile")}</ListBox.Item>
	<ListBox.Item id="billing">{t("settings.billing")}</ListBox.Item>
</Section>
```

## Props

Also accepts everything in `TagProps<"section">`.