Form stack

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

Do

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

Don’t

• 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.

<form>
	<FormStack>
		<TextInput label="Email" type="email" maxWidth="xl" />
		<TextInput label="Password" type="password" maxWidth="xl" />
		<Divider />
		<ButtonGroup>
			<Button type="submit">Submit</Button>
			<Button type="button" variant="secondary">
				Cancel
			</Button>
		</ButtonGroup>
	</FormStack>
</form>

Related components

• Stack – Stack is a primitive layout component used to distribute items vertically with even spacing.