FieldRow

The FieldRow component is responsible for managing horizontal spacing between child form fields, as well as the vertical spacing between itself and other FieldRow elements.

FieldRow

A standard FieldRow
<FieldRow> <Field label="Project name"> <Input placeholder="My first project" /> </Field> <Field label="Task name"> <Input placeholder="My first task" /> </Field> </FieldRow>

FieldRow with custom gutter

The gutter between field elements can also be customised, although we recommend using the default
<div> <FieldRow gutter={40}> <Field label="Name"> <Input placeholder="Give your project a name" /> </Field> <Field label="Summary"> <Input placeholder="A brief description of your project" /> </Field> </FieldRow> <FieldRow gutter={40}> <Field label="Budget"> <Input placeholder="Your total spend for the project" /> </Field> <Field label="Project template"> <Input placeholder="Select a template for the project" /> </Field> </FieldRow> </div>