Unofficial
Internal
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.

The name you’ll use on promotional material.
<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
    type="text"
    name="name"
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
  />
</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.

The name you’ll use on promotional material.
<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
    type="text"
    name="name"
    aria-describedby="name-hint"
    id="name-input"
    class="govuk-input"
  />
</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.

This will be displayed on promotional material.
<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
<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
          type="text"
          id="date-day"
          name="date[day]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
        />
      </div>
      <div class="govuk-date-input__item">
        <label for="date-month" class="govuk-label">
          Month
        </label>
        <input
          type="text"
          id="date-month"
          name="date[month]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-2 govuk-date-input__input"
        />
      </div>
      <div class="govuk-date-input__item">
        <label for="date-year" class="govuk-label">
          Year
        </label>
        <input
          type="text"
          id="date-year"
          name="date[year]"
          inputmode="numeric"
          class="govuk-input govuk-input--width-4 govuk-date-input__input"
        />
      </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.

<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
    type="date"
    name="date"
    id="date-input"
    class="govuk-input"
  />
</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.
<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
          type="radio"
          value="1"
          name="age-restricted"
          id="age-restricted-radio-0"
          class="govuk-radios__input"
        />
        <label
          for="age-restricted-radio-0"
          class="govuk-label govuk-radios__label"
        >
          Yes
        </label>
      </div>
      <div class="govuk-radios__item">
        <input
          type="radio"
          value="0"
          name="age-restricted"
          id="age-restricted-radio-1"
          class="govuk-radios__input"
        />
        <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.

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

Select the country in which the event will be held.
<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 selected="" value="gb">
      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.

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

Select all countries that will be hosting the event.
<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 selected="" value="gb">
      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}
/>