Row

A horizontal flex layout that places children side by side with consistent spacing. The horizontal counterpart to Stack.

Basic Usage

Default row

First

Second

Third

<x-wirekit::row>
    <x-wirekit::card><x-wirekit::card.body>First</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Second</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Third</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::row>

Gap Sizes

Small gap

One

Two

Three

<x-wirekit::row gap="sm">
    <x-wirekit::card><x-wirekit::card.body>One</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Two</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Three</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::row>

Large gap

First

Second

<x-wirekit::row gap="lg">
    <x-wirekit::card><x-wirekit::card.body>First</x-wirekit::card.body></x-wirekit::card>
    <x-wirekit::card><x-wirekit::card.body>Second</x-wirekit::card.body></x-wirekit::card>
</x-wirekit::row>

Justify Between

A common pattern for headers and toolbars: items at each end.

Space between

<x-wirekit::row justify="between">
    <x-wirekit::button intent="neutral">Back</x-wirekit::button>
    <x-wirekit::button intent="primary">Continue</x-wirekit::button>
</x-wirekit::row>

Alignment

Baseline alignment

Large Small

<x-wirekit::row align="baseline" gap="md">
    <x-wirekit::badge size="lg">Large</x-wirekit::badge>
    <x-wirekit::badge size="sm">Small</x-wirekit::badge>
</x-wirekit::row>

A row of fields does not line up on any single edge. A labeled field is taller than an unlabeled one, and a field with a hint is taller still — so align="center" leaves the controls apart, and align="end" fixes that until one field carries a hint.

align-fields makes the row three shared tracks — labels, controls, messages — and every field hands its parts to them. A control sits on the control track whatever its neighbors carry, and a submit button beside them stretches to match. An input, a select and a textarea hand over their own label, hint and error, and a field does it for the control it wraps.

Controls on one line, with only one label between them

Role

<x-wirekit::row gap="sm" align-fields>
    <x-wirekit::field name="share-email">
        <x-wirekit::input name="share-email" placeholder="Share list..." aria-label="Email address to share with" />
    </x-wirekit::field>
    <x-wirekit::field label="Role" name="share-role">
        <x-wirekit::select name="share-role" :options="['guest' => 'Guest', 'editor' => 'Editor']" />
    </x-wirekit::field>
    <x-wirekit::button>Share</x-wirekit::button>
</x-wirekit::row>

It is opt-in because it changes the row's display model, and align / justify stop applying once it is on — the row is a grid rather than a flex line at that point.

Below 48rem the row stacks, and that is the point rather than a limitation: three controls side by side on a phone are three sixty-pixel columns, which is not a narrower control but an unusable one. The shared tracks come back with the room to hold them, and nothing about the markup changes — the same row is a column on a phone and a line on a desktop.

Older browsers keep the fields usable

The shared tracks use CSS subgrid, which is newer than WireKit's support baseline. Where it is missing, the row still renders every field and every control; they simply line up the way they do without this prop. Nothing depends on it.

Wrapping

Enable wrapping for rows that may overflow.

Wrapping row

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6

<x-wirekit::row :wrap="true" gap="sm">
    <x-wirekit::badge intent="primary">Tag 1</x-wirekit::badge>
    <x-wirekit::badge intent="success">Tag 2</x-wirekit::badge>
    <x-wirekit::badge intent="warning">Tag 3</x-wirekit::badge>
    <x-wirekit::badge intent="danger">Tag 4</x-wirekit::badge>
    <x-wirekit::badge intent="info">Tag 5</x-wirekit::badge>
    <x-wirekit::badge intent="neutral">Tag 6</x-wirekit::badge>
</x-wirekit::row>

Wrapping only where it is needed

wrap="responsive" wraps below the md breakpoint and holds a single line above it. A row of four or five items reads as one line on a laptop and as several on a phone, which is what a dense toolbar or a KPI strip wants — the alternative on a narrow screen is a row that runs off the side of the viewport.

A row does not wrap by default, and that stays true. responsive is something you ask for, so every row already in your application renders exactly as it did.

Row — responsive wrapping

Deploys Uptime Queue depth Error rate p95 latency

<x-wirekit::row wrap="responsive" gap="sm">
    <x-wirekit::badge intent="primary">Deploys</x-wirekit::badge>
    <x-wirekit::badge intent="success">Uptime</x-wirekit::badge>
    <x-wirekit::badge intent="warning">Queue depth</x-wirekit::badge>
    <x-wirekit::badge intent="danger">Error rate</x-wirekit::badge>
    <x-wirekit::badge intent="info">p95 latency</x-wirekit::badge>
</x-wirekit::row>

Props

Prop	Type	Default	Description
`gap`	string	`'md'`	Spacing: `none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
`scale`	string	`'space'`	Which spacing ladder `gap` names a rung on: `space` (the default, unchanged) or `gap` for the tighter `--gap-wk-*` ladder — see the note under Design Tokens
`align`	string	`'center'`	Cross-axis: `start`, `center`, `end`, `stretch`, `baseline`
`alignFields`	bool	`false`	Line the row's form controls up on one line — see below
`justify`	string	`'start'`	Main-axis: `start`, `center`, `end`, `between`, `around`, `evenly`
`wrap`	bool \| `'responsive'`	`false`	`true` wraps at every width. `'responsive'` wraps below the `md` breakpoint and holds one line above it — the shape a multi-item row wants on a phone
`as`	string	`'div'`	HTML element to render
`scope`	string\|null	`null`	Scoped personalization name

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

Same spacing tokens as Stack:

Token	Default	Description
`--space-wk-xs`	`0.25rem`	Extra small gap
`--space-wk-sm`	`0.5rem`	Small gap
`--space-wk-md`	`1rem`	Medium gap
`--space-wk-lg`	`1.5rem`	Large gap
`--space-wk-xl`	`2.5rem`	Extra large gap
`--space-wk-2xl`	`4rem`	Double extra large gap

The rung names are shared with a second ladder, and the values are not. scale="space" (the default) reads --space-wk-*; scale="gap" reads the tighter --gap-wk-* ladder, which uses the same xs…2xl labels with different values from md up and is what WireKit's own components read for spacing inside a component. The rung name alone does not tell you which — gap="md" is 1rem on one ladder and 0.75rem on the other — so changing scale without changing gap re-spaces the container on purpose, and swapping a raw utility for a rung of the same name re-spaces it by accident. See Two spacing ladders, same rung names.

Rung	`scale="space"` (default)	`scale="gap"`
`xs`	`0.25rem`	`0.25rem`
`sm`	`0.5rem`	`0.5rem`
`md`	`1rem`	`0.75rem`
`lg`	`1.5rem`	`1rem`
`xl`	`2.5rem`	`1.5rem`
`2xl`	`4rem`	`2rem`

Row