# fieldStackLayout

> The single-column stacking layout shared by every field convenience wrapper's outermost host: its caption, control, and optional supporting passage or validation message lay out in a narrow vertical stack with a small gap between them, keeping a label sitting close to the control it describes.

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

Composes the single-column stack — a `0.25rem` gap between a field's own
caption, control, and optional supporting text — for a host's `mix` prop.
Compose a separate `css()` call for the wider gap between whole fields.

## Signature

```ts
fieldStackLayout<Node extends Element = Element>(): MixinDescriptor<
	Node,
	[styles: CSSStyles],
	ElementProps
>
```

Returns: A `css()` mixin ready for a host element's `mix` prop.

## Examples

```tsx
<div data-slot="date-field" mix={[fieldStackLayout(), mix]}>
	<Label htmlFor={handle.id}>{label}</Label>
	<Input id={handle.id} />
</div>;
```