# Group

> A visual and semantic wrapper binding a cluster of related controls into one unit — a text input paired with its clear button, a row of segmented buttons, a search field with a trailing submit action.

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

Lays children out in a centered flex row with no border, background, or gap, joining
their edges into one shape: only the cluster's outer corners stay round, and the seam
two controls share is drawn once. Focus is shown by whichever control holds it.

## Examples

```tsx
<Group>
	<Button>{t("stepper.decrement")}</Button>
	<Button>{t("stepper.increment")}</Button>
</Group>
```

```tsx
<Group aria-invalid="true">
	<input aria-label={t("form.email")} />
	<Button aria-label={t("form.clear")}>
		<XIcon />
	</Button>
</Group>
```

## Props

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