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.

Props

NameTypeDescription
children
union
gutter
numberPixel value of spacing between field elements
className
stringA class to pass down

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>