[ @sdxc/ui/styles ]

fieldStackLayout

The single-column stacking layout shared by every field convenience wrapper's outermost host.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

Usage

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

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

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

Examples

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