Form layout

Use form layout to arrange fields within a form using standard spacing. By default it stacks fields vertically but also supports horizontal groups of fields.

Form layout component examples

Use to stack form fields vertically, which makes them easier to scan and complete.

import {FormLayout, TextField} from '@shopify/polaris';
import React from 'react';

function Example() {
  return (
    <FormLayout>
      <TextField label="Store name" onChange={() => {}} autoComplete="off" />
      <TextField
        type="email"
        label="Account email"
        onChange={() => {}}
        autoComplete="email"
      />
    </FormLayout>
  );
}

Props

interface FormLayoutProps
children?React.ReactNode

The content to display inside the layout.

Best practices

Forms should:

  • Be considerate of merchants’ time and privacy by only asking for information that’s required
  • Group related tasks under section titles to provide more context and make the interface easier to scan
  • Follow a logical, predictable order—for example, always ask for first name first, and last name second on forms

Content guidelines

Form section title

Form section titles should follow the content guidelines for headings and subheadings.

Field label

A label is a short description of a field. Labels are not help text, and they shouldn’t be used to provide instruction, but they should be meaningful and clearly indicate what is expected. Labels should be:

  • Placed above or beside the form field
  • Short and succinct (1–3 words)
  • Written in sentence case (the first word capitalized, the rest lowercase)
Do
  • Email address
Don't
  • What is your email address?
Do
  • Phone number
Don't
  • My phone number is:

Help text

Help text provides extra guidance to people filling out a form field. This text is easy for people to ignore, so merchants should not need to depend on it to fill out a form. As with all forms, help text should be succinct and easy to read.


    On this page