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">
    <h1 class="govuk-heading-l">
      What is the name of the event?
    </h1>
  </label>
  <div id="name-hint" class="govuk-hint">
    The name you’ll use on promotional material.
  </div>
  <input
    name="name"
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
    type="text"
  />
</div>

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

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">
    <h1 class="govuk-heading-l">
      What is the name of the event?
    </h1>
  </label>
  <div id="name-hint" class="govuk-hint">
    The name you’ll use on promotional material.
  </div>
  <input
    name="name"
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
    type="text"
  />
</div>

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

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">
    <h1 class="govuk-heading-l">
      How would you describe the event?
    </h1>
  </label>
  <div id="desc-hint" class="govuk-hint">
    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
  name="desc"
  label={
    <h1 className="govuk-heading-l">
      How would you describe the event?
    </h1>
  }
  hint="This will be displayed on promotional material."
  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">
      For example, 12 11 2007
    </div>
    <div class="govuk-date-input">
      <div class="govuk-date-input__item">
        <label for="date-day" class="govuk-label">
          Day
        </label>
        <input
          id="date-day"
          name="date[day]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
          type="text"
        />
      </div>
      <div class="govuk-date-input__item">
        <label for="date-month" class="govuk-label">
          Month
        </label>
        <input
          id="date-month"
          name="date[month]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
          type="text"
        />
      </div>
      <div class="govuk-date-input__item">
        <label for="date-year" class="govuk-label">
          Year
        </label>
        <input
          id="date-year"
          name="date[year]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-4 govuk-date-input__input"
          type="text"
        />
      </div>
    </div>
  </fieldset>
</div>

<FormField
  name="date"
  label={
    <h1 className="govuk-heading-l">
      When is the event?
    </h1>
  }
  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">
    <h1 class="govuk-heading-l">
      When is the event?
    </h1>
  </label>
  <input
    name="date"
    id="date-input"
    class="govuk-input"
    type="date"
  />
</div>

<FormField
  name="date"
  label={
    <h1 className="govuk-heading-l">
      When is the event?
    </h1>
  }
  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">
      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
          name="age-restricted"
          id="age-restricted-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="1"
        />
        <label
          for="age-restricted-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="age-restricted"
          id="age-restricted-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="0"
        />
        <label
          for="age-restricted-radio-1"
          class="govuk-label govuk-radios__label"
        >
          No
        </label>
      </div>
    </div>
  </fieldset>
</div>

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

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">
      Select the country in which the event will be
      held.
    </div>
    <div class="govuk-radios govuk-radios--small">
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-0"
          class="govuk-radios__input"
          type="radio"
          value="fr"
        />
        <label
          for="location-radio-0"
          class="govuk-label govuk-radios__label"
        >
          France
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-1"
          class="govuk-radios__input"
          type="radio"
          value="de"
        />
        <label
          for="location-radio-1"
          class="govuk-label govuk-radios__label"
        >
          Germany
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-2"
          class="govuk-radios__input"
          type="radio"
          value="ie"
        />
        <label
          for="location-radio-2"
          class="govuk-label govuk-radios__label"
        >
          Republic of Ireland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-3"
          class="govuk-radios__input"
          type="radio"
          value="pt"
        />
        <label
          for="location-radio-3"
          class="govuk-label govuk-radios__label"
        >
          Portugal
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-4"
          class="govuk-radios__input"
          type="radio"
          value="es"
        />
        <label
          for="location-radio-4"
          class="govuk-label govuk-radios__label"
        >
          Spain
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-5"
          class="govuk-radios__input"
          type="radio"
          value="nl"
        />
        <label
          for="location-radio-5"
          class="govuk-label govuk-radios__label"
        >
          The Netherlands
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          name="location"
          id="location-radio-6"
          class="govuk-radios__input"
          type="radio"
          checked=""
          value="gb"
        />
        <label
          for="location-radio-6"
          class="govuk-label govuk-radios__label"
        >
          United Kingdom
        </label>
      </div>
    </div>
  </fieldset>
</div>

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

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

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">
      Select all countries that will be hosting the
      event.
    </div>
    <div
      class="govuk-checkboxes govuk-checkboxes--small"
    >
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-0"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="fr"
        />
        <label
          for="location-checkbox-0"
          class="govuk-label govuk-checkboxes__label"
        >
          France
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-1"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="de"
        />
        <label
          for="location-checkbox-1"
          class="govuk-label govuk-checkboxes__label"
        >
          Germany
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-2"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="ie"
        />
        <label
          for="location-checkbox-2"
          class="govuk-label govuk-checkboxes__label"
        >
          Republic of Ireland
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-3"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="pt"
        />
        <label
          for="location-checkbox-3"
          class="govuk-label govuk-checkboxes__label"
        >
          Portugal
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-4"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="es"
        />
        <label
          for="location-checkbox-4"
          class="govuk-label govuk-checkboxes__label"
        >
          Spain
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-5"
          class="govuk-checkboxes__input"
          type="checkbox"
          value="nl"
        />
        <label
          for="location-checkbox-5"
          class="govuk-label govuk-checkboxes__label"
        >
          The Netherlands
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input
          name="location"
          id="location-checkbox-6"
          class="govuk-checkboxes__input"
          type="checkbox"
          checked=""
          value="gb"
        />
        <label
          for="location-checkbox-6"
          class="govuk-label govuk-checkboxes__label"
        >
          United Kingdom
        </label>
      </div>
    </div>
  </fieldset>
</div>

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

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