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.

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>

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	`false`	Allow wrapping
`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