Form

Form is a wrapper component to apply a consistent layout and handle form submissions.

Table of contents

• How to use Form
• Component variations
• Content recommendations
• Accessibility

How to use Form

• The Form component should wrap FieldGroup components to apply consistent layouts
• Provide an onSubmit handler for form validation and submission

Component variations

Basic example

<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="default">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Provide an email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="default">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Provide an email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
Hide source

Default spacing (spacing="default")

<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="default">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Enter email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="default">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Enter email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
Hide source

Condensed spacing (spacing="condensed")

<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="condensed">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Enter email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
<React.Fragment>
  <Form onSubmit={() => console.log('onSubmit')} spacing="condensed">
    <FieldGroup>
      <TextField
        required
        name="nameInput"
        id="nameInput"
        labelText="Name"
        value="Claus Mitchell"
        helpText="Provide a full name"
      />
      <TextField
        required
        name="emailInput"
        id="emailInput"
        labelText="Email address"
        value="claus.mitchell@contentful.com"
        helpText="Enter email address"
      />
    </FieldGroup>
    <FieldGroup>
      <Button>Submit</Button>
    </FieldGroup>
  </Form>
</React.Fragment>
Hide source

Content recommendations

Missing

Accessibility

Missing