Agriculture Design System
Design System for the Export Service

Form stack

The Form stack component is used to apply consistent vertical spacing between elements in forms.

import { ... } from '@ag.ds-next/react/form-stack';


  • use within forms to apply consistent vertical spacing between form elements
  • always use the default gap/spacing value of 2rem (32px)


  • use this component outside of forms
  • use any other gap/spacing value

Basic usage

Below is a live code example of a simple form. In this example, notice how the FormStack component is being used to space out form elements evenly.

Open in Playroom, opens in a new tab
		<TextInput label="Email" type="email" maxWidth="xl" />
		<TextInput label="Password" type="password" maxWidth="xl" />
		<Divider />
			<Button type="submit">Submit</Button>
			<Button type="button" variant="secondary">
  • Stack Stack is a primitive layout component used to distribute items vertically with even spacing.