Field Stack — Alchemy Design System

Columns

Lay fields side by side — one, two or three per row. Any row collapses to a single stacked column below 680px, so nothing gets cramped on mobile.

columns={1}

Email

columns={2}

First name

Last name

columns={3}

City

Postcode

Country

Stacked rows

Stack several Field Stacks to build a whole form — mixed column counts, one gap between every row.

A real form layout

First name

Last name

Email

Tell us about your project

Props

Prop	Type	Default	Notes
`columns`	1 \| 2 \| 3	`1`	Fields per row. Collapses to a single column below 680px.

Usage

One Field Stack per row. Wrap the whole set in a flex/grid column (or nest them) for even spacing between rows.

<FieldStack columns={2}>
  <Input label="First name" placeholder="Jane" />
  <Input label="Last name" placeholder="Doe" />
</FieldStack>

<FieldStack>
  <Input label="Email" type="email" placeholder="jane@company.com" />
</FieldStack>

<FieldStack>
  <Textarea label="Message" rows={4} />
</FieldStack>

Rules

Do

Pair fields that belong together — first / last name, city / postcode.

Keep long fields (Textarea, address) on their own columns=1 row.

Don't

Force three columns of long labels — they wrap and crowd. Two is usually the max.

Set your own gap on the fields; the stack owns the spacing.