Components

Form field

Unofficial

A component for colecting a piece of data from the user. The type of form field that is rendered will depend on the props that are supplied to it. For example, providing a few options will cause it to render as some radio buttons.

Note: To use this as part of the wider forms framework, you should instead import the Form component and replace FormField in the examples below with Form.Field.

What is the name of the event?

The name you’ll use on promotional material.

HTML
React

<div id="name" class="govuk-form-group">
  <label
    for="name-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      What is the name of the event?
    </h1>
  </label>
  <div
    id="name-hint"
    class="govuk-hint"
    aria-hidden="false"
  >
    The name you’ll use on promotional material.
  </div>
  <input
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
    type="text"
    name="name"
  />
</div>

<FormField
  hint="The name you’ll use on promotional material."
  label={
    <h1 className="govuk-heading-l">
      What is the name of the event?
    </h1>
  }
  name="name"
/>

Props

Name	Type	Default	Description

How it works

With minimal props it will render as a simple text field.

What is the name of the event?

The name you’ll use on promotional material.

HTML
React

<div id="name" class="govuk-form-group">
  <label
    for="name-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      What is the name of the event?
    </h1>
  </label>
  <div
    id="name-hint"
    class="govuk-hint"
    aria-hidden="false"
  >
    The name you’ll use on promotional material.
  </div>
  <input
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
    type="text"
    name="name"
  />
</div>

<FormField
  hint="The name you’ll use on promotional material."
  label={
    <h1 className="govuk-heading-l">
      What is the name of the event?
    </h1>
  }
  name="name"
/>

Multi-line

By adding a rows prop that is greater than 1 we get a textarea of that size.

How would you describe the event?

This will be displayed on promotional material.

HTML
React

<div id="desc" class="govuk-form-group">
  <label
    for="desc-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      How would you describe the event?
    </h1>
  </label>
  <div
    id="desc-hint"
    class="govuk-hint"
    aria-hidden="false"
  >
    This will be displayed on promotional material.
  </div>
  <textarea
    name="desc"
    aria-describedby="desc-hint"
    class="govuk-textarea"
    id="desc-input"
    rows="3"
  ></textarea>
</div>

<FormField
  hint="This will be displayed on promotional material."
  label={
    <h1 className="govuk-heading-l">
      How would you describe the event?
    </h1>
  }
  name="desc"
  rows={3}
/>

Dates

It's also possible to force a certain rendering mode by using the type prop. The most common use for this is to ask for dates by setting it to date.

When is the event?

For example, 12 11 2007

Day

Month

Year

HTML
React

<div id="date" class="govuk-form-group">
  <fieldset
    aria-describedby="date-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        When is the event?
      </h1>
    </legend>
    <div
      id="date-hint"
      class="govuk-hint"
      aria-hidden="false"
    >
      For example, 12 11 2007
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <label
          for="date-day"
          class="govuk-label"
          aria-hidden="false"
        >
          Day
        </label>
        <input
          id="date-day"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
          type="text"
          name="date[day]"
        />
      </div>
      <div class="govuk-date-input__item">
        <label
          for="date-month"
          class="govuk-label"
          aria-hidden="false"
        >
          Month
        </label>
        <input
          id="date-month"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
          type="text"
          name="date[month]"
        />
      </div>
      <div class="govuk-date-input__item">
        <label
          for="date-year"
          class="govuk-label"
          aria-hidden="false"
        >
          Year
        </label>
        <input
          id="date-year"
          inputmode="numeric"
          class="govuk-input govuk-input--width-4 govuk-date-input__input"
          type="text"
          name="date[year]"
        />
      </div>
    </div>
  </fieldset>
</div>

<FormField
  label={
    <h1 className="govuk-heading-l">
      When is the event?
    </h1>
  }
  name="date"
  type="date"
/>

Date picker

If you prefer, you can still use the browser's native, date-picker by setting the type props to native-date.

When is the event?

HTML
React

<div id="date" class="govuk-form-group">
  <label
    for="date-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      When is the event?
    </h1>
  </label>
  <input
    id="date-input"
    class="govuk-input"
    type="date"
    name="date"
  />
</div>

<FormField
  label={
    <h1 className="govuk-heading-l">
      When is the event?
    </h1>
  }
  name="date"
  type="native-date"
/>

Selecting from options

If you want the user to only answer from a list of options just provide an options prop.

A single choice from few options

Providing very few option will give you radios.

Is it suitable for under-18s?

Select 'No' if there will be any explicit content.

Yes

HTML
React

<div id="age-restricted" class="govuk-form-group">
  <fieldset
    aria-describedby="age-restricted-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Is it suitable for under-18s?
      </h1>
    </legend>
    <div
      id="age-restricted-hint"
      class="govuk-hint"
      aria-hidden="false"
    >
      Select &#x27;No&#x27; if there will be any
      explicit content.
    </div>
    <div class="govuk-radios govuk-radios--inline">
      <div class="govuk-radios__item">
        <input
          id="age-restricted-radio-0"
          class="govuk-radios__input"
          type="radio"
          name="age-restricted"
          value="1"
        />
        <label
          for="age-restricted-radio-0"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="age-restricted-radio-1"
          class="govuk-radios__input"
          type="radio"
          name="age-restricted"
          value="0"
        />
        <label
          for="age-restricted-radio-1"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>

<FormField
  classModifiers="inline"
  hint="Select 'No' if there will be any explicit content."
  label={
    <h1 className="govuk-heading-l">
      Is it suitable for under-18s?
    </h1>
  }
  name="age-restricted"
  options={[
    {
      label: "Yes",
      value: "1",
    },
    {
      label: "No",
      value: "0",
    },
  ]}
/>

A single choice from more options

Providing more options will give you small radios.

HTML
React

<div id="location" class="govuk-form-group">
  <fieldset
    aria-describedby="location-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Where will the event take place?
      </h1>
    </legend>
    <div
      id="location-hint"
      class="govuk-hint"
      aria-hidden="false"
    >
      Select the country in which the event will be
      held.
    </div>
    <div class="govuk-radios govuk-radios--small">
      <div class="govuk-radios__item">
        <input
          id="location-radio-0"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="fr"
        />
        <label
          for="location-radio-0"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          France
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-1"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="de"
        />
        <label
          for="location-radio-1"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          Germany
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-2"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="ie"
        />
        <label
          for="location-radio-2"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          Republic of Ireland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-3"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="pt"
        />
        <label
          for="location-radio-3"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          Portugal
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-4"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="es"
        />
        <label
          for="location-radio-4"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          Spain
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-5"
          class="govuk-radios__input"
          type="radio"
          name="location"
          value="nl"
        />
        <label
          for="location-radio-5"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          The Netherlands
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          id="location-radio-6"
          class="govuk-radios__input"
          type="radio"
          name="location"
          checked=""
          value="gb"
        />
        <label
          for="location-radio-6"
          class="govuk-label govuk-radios__label"
          aria-hidden="false"
        >
          United Kingdom
        </label>
      </div>
    </div>
  </fieldset>
</div>

<FormField
  hint="Select the country in which the event will be held."
  label={
    <h1 className="govuk-heading-l">
      Where will the event take place?
    </h1>
  }
  name="location"
  options={[
    {
      label: "France",
      value: "fr",
    },
    {
      label: "Germany",
      value: "de",
    },
    {
      label: "Republic of Ireland",
      value: "ie",
    },
    {
      label: "Portugal",
      value: "pt",
    },
    {
      label: "Spain",
      value: "es",
    },
    {
      label: "The Netherlands",
      value: "nl",
    },
    {
      label: "United Kingdom",
      selected: true,
      value: "gb",
    },
  ]}
/>

A single choice from more options

Providing lots of options will give you a select box. (Note that these do not test well with users!)

Where will the event take place?

Select the country in which the event will be held.

HTML
React

<div id="location" class="govuk-form-group">
  <label
    for="location-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      Where will the event take place?
    </h1>
  </label>
  <div
    id="location-hint"
    class="govuk-hint"
    aria-hidden="false"
  >
    Select the country in which the event will be
    held.
  </div>
  <select
    name="location"
    aria-describedby="location-hint"
    class="govuk-select"
    id="location-input"
  >
    <option value="bg">Bulgaria</option>
    <option value="cz">Czech Republic</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="fi">Finland</option>
    <option value="hu">Hungary</option>
    <option value="it">Italy</option>
    <option value="ie">Republic of Ireland</option>
    <option value="ro">Romania</option>
    <option value="no">Norway</option>
    <option value="pl">Poland</option>
    <option value="pt">Portugal</option>
    <option value="ru">Russia</option>
    <option value="sk">Slovakia</option>
    <option value="si">Slovenia</option>
    <option value="es">Spain</option>
    <option value="se">Sweden</option>
    <option value="ch">Switzerland</option>
    <option value="nl">The Netherlands</option>
    <option value="ua">Ukraine</option>
    <option value="gb" selected="">
      United Kingdom
    </option>
  </select>
</div>

<FormField
  hint="Select the country in which the event will be held."
  label={
    <h1 className="govuk-heading-l">
      Where will the event take place?
    </h1>
  }
  name="location"
  options={[
    {
      label: "Bulgaria",
      value: "bg",
    },
    {
      label: "Czech Republic",
      value: "cz",
    },
    {
      label: "France",
      value: "fr",
    },
    {
      label: "Germany",
      value: "de",
    },
    {
      label: "Finland",
      value: "fi",
    },
    {
      label: "Hungary",
      value: "hu",
    },
    {
      label: "Italy",
      value: "it",
    },
    {
      label: "Republic of Ireland",
      value: "ie",
    },
    {
      label: "Romania",
      value: "ro",
    },
    {
      label: "Norway",
      value: "no",
    },
    {
      label: "Poland",
      value: "pl",
    },
    {
      label: "Portugal",
      value: "pt",
    },
    {
      label: "Russia",
      value: "ru",
    },
    {
      label: "Slovakia",
      value: "sk",
    },
    {
      label: "Slovenia",
      value: "si",
    },
    {
      label: "Spain",
      value: "es",
    },
    {
      label: "Sweden",
      value: "se",
    },
    {
      label: "Switzerland",
      value: "ch",
    },
    {
      label: "The Netherlands",
      value: "nl",
    },
    {
      label: "Ukraine",
      value: "ua",
    },
    {
      label: "United Kingdom",
      selected: true,
      value: "gb",
    },
  ]}
/>

Multiple choices

If you want the user to be able to select multiple options just add the multiple prop.

HTML
React

<div id="location" class="govuk-form-group">
  <fieldset
    aria-describedby="location-hint"
    class="govuk-fieldset"
  >
    <legend class="govuk-fieldset__legend">
      <h1 class="govuk-heading-l">
        Where will the event take place?
      </h1>
    </legend>
    <div
      id="location-hint"
      class="govuk-hint"
      aria-hidden="false"
    >
      Select all countries that will be hosting the
      event.
    </div>
    <div
      class="govuk-checkboxes govuk-checkboxes--small"
    >
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-0"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="fr"
        />
        <label
          for="location-checkbox-0"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          France
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-1"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="de"
        />
        <label
          for="location-checkbox-1"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          Germany
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-2"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="ie"
        />
        <label
          for="location-checkbox-2"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          Republic of Ireland
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-3"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="pt"
        />
        <label
          for="location-checkbox-3"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          Portugal
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-4"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="es"
        />
        <label
          for="location-checkbox-4"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          Spain
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-5"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          value="nl"
        />
        <label
          for="location-checkbox-5"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          The Netherlands
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          id="location-checkbox-6"
          class="govuk-checkboxes__input"
          type="checkbox"
          name="location"
          checked=""
          value="gb"
        />
        <label
          for="location-checkbox-6"
          class="govuk-label govuk-checkboxes__label"
          aria-hidden="false"
        >
          United Kingdom
        </label>
      </div>
    </div>
  </fieldset>
</div>

<FormField
  hint="Select all countries that will be hosting the event."
  label={
    <h1 className="govuk-heading-l">
      Where will the event take place?
    </h1>
  }
  multiple
  name="location"
  options={[
    {
      label: "France",
      value: "fr",
    },
    {
      label: "Germany",
      value: "de",
    },
    {
      label: "Republic of Ireland",
      value: "ie",
    },
    {
      label: "Portugal",
      value: "pt",
    },
    {
      label: "Spain",
      value: "es",
    },
    {
      label: "The Netherlands",
      value: "nl",
    },
    {
      label: "United Kingdom",
      selected: true,
      value: "gb",
    },
  ]}
/>

Multiple choices from many options

If you provide a lot of options you will get a muilt-select box. (Note that these do not test well with users!)

Where will the event take place?

Select all countries that will be hosting the event.

HTML
React

<div id="location" class="govuk-form-group">
  <label
    for="location-input"
    class="govuk-label"
    aria-hidden="false"
  >
    <h1 class="govuk-heading-l">
      Where will the event take place?
    </h1>
  </label>
  <div
    id="location-hint"
    class="govuk-hint"
    aria-hidden="false"
  >
    Select all countries that will be hosting the
    event.
  </div>
  <select
    name="location"
    size="8"
    aria-describedby="location-hint"
    class="govuk-select"
    id="location-input"
    multiple=""
  >
    <option value="bg">Bulgaria</option>
    <option value="cz">Czech Republic</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="fi">Finland</option>
    <option value="hu">Hungary</option>
    <option value="it">Italy</option>
    <option value="ie">Republic of Ireland</option>
    <option value="ro">Romania</option>
    <option value="no">Norway</option>
    <option value="pl">Poland</option>
    <option value="pt">Portugal</option>
    <option value="ru">Russia</option>
    <option value="sk">Slovakia</option>
    <option value="si">Slovenia</option>
    <option value="es">Spain</option>
    <option value="se">Sweden</option>
    <option value="ch">Switzerland</option>
    <option value="nl">The Netherlands</option>
    <option value="ua">Ukraine</option>
    <option value="gb" selected="">
      United Kingdom
    </option>
  </select>
</div>

<FormField
  hint="Select all countries that will be hosting the event."
  label={
    <h1 className="govuk-heading-l">
      Where will the event take place?
    </h1>
  }
  multiple
  name="location"
  options={[
    {
      label: "Bulgaria",
      value: "bg",
    },
    {
      label: "Czech Republic",
      value: "cz",
    },
    {
      label: "France",
      value: "fr",
    },
    {
      label: "Germany",
      value: "de",
    },
    {
      label: "Finland",
      value: "fi",
    },
    {
      label: "Hungary",
      value: "hu",
    },
    {
      label: "Italy",
      value: "it",
    },
    {
      label: "Republic of Ireland",
      value: "ie",
    },
    {
      label: "Romania",
      value: "ro",
    },
    {
      label: "Norway",
      value: "no",
    },
    {
      label: "Poland",
      value: "pl",
    },
    {
      label: "Portugal",
      value: "pt",
    },
    {
      label: "Russia",
      value: "ru",
    },
    {
      label: "Slovakia",
      value: "sk",
    },
    {
      label: "Slovenia",
      value: "si",
    },
    {
      label: "Spain",
      value: "es",
    },
    {
      label: "Sweden",
      value: "se",
    },
    {
      label: "Switzerland",
      value: "ch",
    },
    {
      label: "The Netherlands",
      value: "nl",
    },
    {
      label: "Ukraine",
      value: "ua",
    },
    {
      label: "United Kingdom",
      selected: true,
      value: "gb",
    },
  ]}
  size={8}
/>

Bulgaria
Czech Republic
France
Germany
Finland
Hungary
Italy
Republic of Ireland
Romania
Norway
Poland
Portugal
Russia
Slovakia
Slovenia
Spain
Sweden
Switzerland
The Netherlands
Ukraine
United Kingdom