Unofficial
Internal
Components

Form

Unofficial Experimental

A component to collect information from the user.

Write your firstname followed by your surname
<form action="/" class="not-govuk-form" method="get">
  <div id="fullName" class="govuk-form-group">
    <label for="fullName-input" class="govuk-label">
      <h2>What is your name?</h2>
    </label>
    <div id="fullName-hint" class="govuk-hint">
      Write your firstname followed by your surname
    </div>
    <input
      type="text"
      name="fullName"
      value=""
      aria-describedby="fullName-hint"
      id="fullName-input"
      class="govuk-input"
    />
  </div>
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button"
  >
    Continue
  </button>
</form>

<Form action="/result" method="get">
  <Form.Page>
    <Form.TextInput
      name="fullName"
      prettyName="name"
      label={<h2>What is your name?</h2>}
      hint="Write your firstname followed by your surname"
      validators={[required()]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Page>
    <Form.Radios
      name="sex"
      label={<h2>Sex?</h2>}
      options={[
        {
          value: "male",
          label: "Male",
        },
        {
          value: "female",
          label: "Female",
        },
        {
          value: "no",
          label: "No thanks, we're British",
        },
      ]}
      validators={[required("Provide your sex")]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Fork
    if={v => v.sex === "male"}
    then={
      <Form.Page>
        <Form.DateInput
          name="dob"
          prettyName="date of birth"
          label={<h2>What is your date of birth?</h2>}
          validators={[
            required("Provide your date of birth"),
            past(),
            after("1900-01-01")(),
          ]}
        />
        <Form.Submit>Submit</Form.Submit>
      </Form.Page>
    }
    else={
      <Form.Page>
        <Form.Radios
          name="married"
          label={<h2>Are you married?</h2>}
          options={[
            {
              value: "Y",
              label: "Yes",
            },
            {
              value: "N",
              label: "No",
            },
          ]}
          validators={[
            required("Provide your marital status"),
          ]}
        />
        <Form.Submit>Submit</Form.Submit>
      </Form.Page>
    }
  />
</Form>
Props
Name Type Default Description

Stories

Standard

A standard Form.

Write your firstname followed by your surname

Sex?

What is your date of birth?
For example, 12 11 2007

Are you married?

 
<form action="/" class="not-govuk-form" method="get">
  <div id="fullName" class="govuk-form-group">
    <label for="fullName-input" class="govuk-label">
      <h2>What is your name?</h2>
    </label>
    <div id="fullName-hint" class="govuk-hint">
      Write your firstname followed by your surname
    </div>
    <input
      type="text"
      name="fullName"
      value=""
      aria-describedby="fullName-hint"
      id="fullName-input"
      class="govuk-input"
    />
  </div>
  <div id="sex" class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend">
        <h2>Sex?</h2>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input
            type="radio"
            value="male"
            name="sex"
            id="sex-radio-0"
            class="govuk-radios__input"
          />
          <label
            for="sex-radio-0"
            class="govuk-label govuk-radios__label"
          >
            Male
          </label>
        </div>
        <div class="govuk-radios__item">
          <input
            type="radio"
            value="female"
            name="sex"
            id="sex-radio-1"
            class="govuk-radios__input"
          />
          <label
            for="sex-radio-1"
            class="govuk-label govuk-radios__label"
          >
            Female
          </label>
        </div>
        <div class="govuk-radios__item">
          <input
            type="radio"
            value="no"
            name="sex"
            id="sex-radio-2"
            class="govuk-radios__input"
          />
          <label
            for="sex-radio-2"
            class="govuk-label govuk-radios__label"
          >
            No thanks, we&#x27;re British
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <div id="dob" class="govuk-form-group">
    <fieldset
      aria-describedby="dob-hint"
      class="govuk-fieldset"
    >
      <legend class="govuk-fieldset__legend">
        <h2>What is your date of birth?</h2>
      </legend>
      <div id="dob-hint" class="govuk-hint">
        For example, 12 11 2007
      </div>
      <div class="govuk-date-input">
        <div class="govuk-date-input__item">
          <label for="dob-day" class="govuk-label">
            Day
          </label>
          <input
            type="text"
            id="dob-day"
            name="dob[day]"
            inputmode="numeric"
            value=""
            class="govuk-input govuk-input--width-2 govuk-date-input__input"
          />
        </div>
        <div class="govuk-date-input__item">
          <label for="dob-month" class="govuk-label">
            Month
          </label>
          <input
            type="text"
            id="dob-month"
            name="dob[month]"
            inputmode="numeric"
            value=""
            class="govuk-input govuk-input--width-2 govuk-date-input__input"
          />
        </div>
        <div class="govuk-date-input__item">
          <label for="dob-year" class="govuk-label">
            Year
          </label>
          <input
            type="text"
            id="dob-year"
            name="dob[year]"
            inputmode="numeric"
            value=""
            class="govuk-input govuk-input--width-4 govuk-date-input__input"
          />
        </div>
      </div>
    </fieldset>
  </div>
  <div id="married" class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend">
        <h2>Are you married?</h2>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input
            type="radio"
            value="Y"
            name="married"
            id="married-radio-0"
            class="govuk-radios__input"
          />
          <label
            for="married-radio-0"
            class="govuk-label govuk-radios__label"
          >
            Yes
          </label>
        </div>
        <div class="govuk-radios__item">
          <input
            type="radio"
            value="N"
            name="married"
            id="married-radio-1"
            class="govuk-radios__input"
          />
          <label
            for="married-radio-1"
            class="govuk-label govuk-radios__label"
          >
            No
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button"
  >
    Submit
  </button>
</form>

<Form action="/result" method="get">
  <Form.TextInput
    name="fullName"
    prettyName="name"
    label={<h2>What is your name?</h2>}
    hint="Write your firstname followed by your surname"
    validators={[required()]}
  />
  <Form.Radios
    name="sex"
    label={<h2>Sex?</h2>}
    options={[
      {
        value: "male",
        label: "Male",
      },
      {
        value: "female",
        label: "Female",
      },
      {
        value: "no",
        label: "No thanks, we're British",
      },
    ]}
    validators={[required("Provide your sex")]}
  />
  <Form.DateInput
    name="dob"
    prettyName="date of birth"
    label={<h2>What is your date of birth?</h2>}
    validators={[
      required("Provide your date of birth"),
      past(),
      after("1900-01-01")(),
    ]}
  />
  <Form.Radios
    name="married"
    label={<h2>Are you married?</h2>}
    options={[
      {
        value: "Y",
        label: "Yes",
      },
      {
        value: "N",
        label: "No",
      },
    ]}
    validators={[
      required("Provide your marital status"),
    ]}
  />
  <Form.Submit>Submit</Form.Submit>
</Form>

Steps

Break up your form into steps, using Form.Page, to make it less overwhelming for the user.

Write your firstname followed by your surname
<form action="/" class="not-govuk-form" method="get">
  <div id="fullName" class="govuk-form-group">
    <label for="fullName-input" class="govuk-label">
      <h2>What is your name?</h2>
    </label>
    <div id="fullName-hint" class="govuk-hint">
      Write your firstname followed by your surname
    </div>
    <input
      type="text"
      name="fullName"
      value=""
      aria-describedby="fullName-hint"
      id="fullName-input"
      class="govuk-input"
    />
  </div>
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button"
  >
    Continue
  </button>
</form>

<Form action="/result" method="get">
  <Form.Page>
    <Form.TextInput
      name="fullName"
      prettyName="name"
      label={<h2>What is your name?</h2>}
      hint="Write your firstname followed by your surname"
      validators={[required()]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Page>
    <Form.Radios
      name="sex"
      label={<h2>Sex?</h2>}
      options={[
        {
          value: "male",
          label: "Male",
        },
        {
          value: "female",
          label: "Female",
        },
        {
          value: "no",
          label: "No thanks, we're British",
        },
      ]}
      validators={[required("Provide your sex")]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Page>
    <Form.DateInput
      name="dob"
      prettyName="date of birth"
      label={<h2>What is your date of birth?</h2>}
      validators={[
        required("Provide your date of birth"),
        past(),
        after("1900-01-01")(),
      ]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Page>
    <Form.Radios
      name="married"
      label={<h2>Are you married?</h2>}
      options={[
        {
          value: "Y",
          label: "Yes",
        },
        {
          value: "N",
          label: "No",
        },
      ]}
      validators={[
        required("Provide your marital status"),
      ]}
    />
    <Form.Submit>Submit</Form.Submit>
  </Form.Page>
</Form>

Forks

Split your form's journey based on user input, using Form.Fork, to avoid requesting information you don't need.

The example below will send the user down a different path depending on their sex.

Write your firstname followed by your surname
<form action="/" class="not-govuk-form" method="get">
  <div id="fullName" class="govuk-form-group">
    <label for="fullName-input" class="govuk-label">
      <h2>What is your name?</h2>
    </label>
    <div id="fullName-hint" class="govuk-hint">
      Write your firstname followed by your surname
    </div>
    <input
      type="text"
      name="fullName"
      value=""
      aria-describedby="fullName-hint"
      id="fullName-input"
      class="govuk-input"
    />
  </div>
  <button
    data-module="govuk-button"
    type="submit"
    class="govuk-button"
  >
    Continue
  </button>
</form>

<Form action="/result" method="get">
  <Form.Page>
    <Form.TextInput
      name="fullName"
      prettyName="name"
      label={<h2>What is your name?</h2>}
      hint="Write your firstname followed by your surname"
      validators={[required()]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Page>
    <Form.Radios
      name="sex"
      label={<h2>Sex?</h2>}
      options={[
        {
          value: "male",
          label: "Male",
        },
        {
          value: "female",
          label: "Female",
        },
        {
          value: "no",
          label: "No thanks, we're British",
        },
      ]}
      validators={[required("Provide your sex")]}
    />
    <Form.Submit>Continue</Form.Submit>
  </Form.Page>
  <Form.Fork
    if={v => v.sex === "male"}
    then={
      <Form.Page>
        <Form.DateInput
          name="dob"
          prettyName="date of birth"
          label={<h2>What is your date of birth?</h2>}
          validators={[
            required("Provide your date of birth"),
            past(),
            after("1900-01-01")(),
          ]}
        />
        <Form.Submit>Submit</Form.Submit>
      </Form.Page>
    }
    else={
      <Form.Page>
        <Form.Radios
          name="married"
          label={<h2>Are you married?</h2>}
          options={[
            {
              value: "Y",
              label: "Yes",
            },
            {
              value: "N",
              label: "No",
            },
          ]}
          validators={[
            required("Provide your marital status"),
          ]}
        />
        <Form.Submit>Submit</Form.Submit>
      </Form.Page>
    }
  />
</Form>