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
Formcomponent and replaceFormFieldin the examples below withForm.Field.
The name you’ll use on promotional material.
<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
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.
The name you’ll use on promotional material.
<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
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.
This will be displayed on promotional material.
<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
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.
<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"
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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.
<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
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.
<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 'No' 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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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.
<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
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
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
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.
<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
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
aria-hidden="false"
>
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"
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
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}
/>