Skip to main contentComponents
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.
Props
How it works
With minimal props it will render as a simple text field.
Multi-line
By adding a rows prop that is greater than 1 we get a textarea of that size.
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.
Date picker
If you prefer, you can still use the browser's native, date-picker by setting
the type props to 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.
A single choice from more options
Providing more options will give you small radios.
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!)
Multiple choices
If you want the user to be able to select multiple options just add the
multiple prop.
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!)
<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"
/>
<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"
/>
<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}
/>
<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"
/>
<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"
/>
<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
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",
},
]}
/>
<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",
},
]}
/>
<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",
},
]}
/>
<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",
},
]}
/>
<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}
/>