Form

A Form groups several input components to gather information from the user. The FormActions are placed right beneath the input components and display at least two actions to either complete or cancel the current task.

A Form can be submitted by hitting Enter while entering text inside an input component or by pressing the primary Button of the form.

Sample form

<Form
  onSubmit={[Function handleSubmit]}
>
  <ControlGroup>
    <ControlGroupItem
      adjust="flex"
      label="First value"
    >
      <TextBox
        onChange={[Function onChange]}
        placeholder="Enter some data…"
      />
    </ControlGroupItem>
  </ControlGroup>
  <ControlGroup>
    <ControlGroupItem
      label="This is a second value"
    >
      <CheckBox
        onChange={[Function onChange]}
      />
    </ControlGroupItem>
  </ControlGroup>
  <FormActions>
    <Button
      isPrimary={true}
    >
      Submit
    </Button>
    <Button>
      Cancel
    </Button>
  </FormActions>
</Form>

Stacked actions

If there is limited space available horizontally, it is possible to stack FormActions by setting the type property of FormActions component to "stacked"

<Form
  onSubmit={[Function handleSubmit]}
>
  <ControlGroup>
    <ControlGroupItem
      adjust="flex"
      label="First value"
    >
      <TextBox
        onChange={[Function onChange]}
        placeholder="Enter some data…"
      />
    </ControlGroupItem>
  </ControlGroup>
  <ControlGroup>
    <ControlGroupItem
      label="This is a second value"
    >
      <CheckBox
        onChange={[Function onChange]}
      />
    </ControlGroupItem>
  </ControlGroup>
  <FormActions
    type="stacked"
  >
    <Button
      isPrimary={true}
    >
      Submit
    </Button>
    <Button>
      Cancel
    </Button>
  </FormActions>
</Form>