Unofficial
Internal
Components
Form
Unofficial Experimental
A component to collect information from the user.
<form action="/" class="not-govuk-form" method="get">
<div id="fullName" class="govuk-form-group">
<label
for="fullName-input"
class="govuk-label"
aria-hidden="false"
>
<h2>What is your name?</h2>
</label>
<div
id="fullName-hint"
class="govuk-hint"
aria-hidden="false"
>
Write your firstname followed by your surname
</div>
<input
name="fullName"
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form action="/result" method="get">
<Form.Page>
<Form.TextInput
name="fullName"
prettyName="name"
label={<h2>What is your name?</h2>}
hint="Write your firstname followed by your surname"
validators={[required()]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Page>
<Form.Radios
name="sex"
label={<h2>Sex?</h2>}
options={[
{
value: "male",
label: "Male",
},
{
value: "female",
label: "Female",
},
{
value: "no",
label: "No thanks, we're British",
},
]}
validators={[required("Provide your sex")]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Fork
if={v => v.sex === "male"}
then={
<Form.Page>
<Form.DateInput
name="dob"
prettyName="date of birth"
label={<h2>What is your date of birth?</h2>}
validators={[
required("Provide your date of birth"),
past(),
after("1900-01-01")(),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form.Page>
}
else={
<Form.Page>
<Form.Radios
name="married"
label={<h2>Are you married?</h2>}
options={[
{
value: "Y",
label: "Yes",
},
{
value: "N",
label: "No",
},
]}
validators={[
required("Provide your marital status"),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form.Page>
}
/>
</Form>
Props
| Name | Type | Default | Description |
|---|
Stories
Standard
A standard Form.
<form action="/" class="not-govuk-form" method="get">
<div id="fullName" class="govuk-form-group">
<label
for="fullName-input"
class="govuk-label"
aria-hidden="false"
>
<h2>What is your name?</h2>
</label>
<div
id="fullName-hint"
class="govuk-hint"
aria-hidden="false"
>
Write your firstname followed by your surname
</div>
<input
name="fullName"
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
value=""
/>
</div>
<div id="sex" class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
<h2>Sex?</h2>
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input
name="sex"
id="sex-radio-0"
class="govuk-radios__input"
type="radio"
value="male"
/>
<label
for="sex-radio-0"
class="govuk-label govuk-radios__label"
aria-hidden="false"
>
Male
</label>
</div>
<div class="govuk-radios__item">
<input
name="sex"
id="sex-radio-1"
class="govuk-radios__input"
type="radio"
value="female"
/>
<label
for="sex-radio-1"
class="govuk-label govuk-radios__label"
aria-hidden="false"
>
Female
</label>
</div>
<div class="govuk-radios__item">
<input
name="sex"
id="sex-radio-2"
class="govuk-radios__input"
type="radio"
value="no"
/>
<label
for="sex-radio-2"
class="govuk-label govuk-radios__label"
aria-hidden="false"
>
No thanks, we're British
</label>
</div>
</div>
</fieldset>
</div>
<div id="dob" class="govuk-form-group">
<fieldset
aria-describedby="dob-hint"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
<h2>What is your date of birth?</h2>
</legend>
<div
id="dob-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="dob-day"
class="govuk-label"
aria-hidden="false"
>
Day
</label>
<input
id="dob-day"
name="dob[day]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
type="text"
value=""
/>
</div>
<div class="govuk-date-input__item">
<label
for="dob-month"
class="govuk-label"
aria-hidden="false"
>
Month
</label>
<input
id="dob-month"
name="dob[month]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
type="text"
value=""
/>
</div>
<div class="govuk-date-input__item">
<label
for="dob-year"
class="govuk-label"
aria-hidden="false"
>
Year
</label>
<input
id="dob-year"
name="dob[year]"
inputmode="numeric"
class="govuk-input govuk-input--width-4 govuk-date-input__input"
type="text"
value=""
/>
</div>
</div>
</fieldset>
</div>
<div id="married" class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
<h2>Are you married?</h2>
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input
name="married"
id="married-radio-0"
class="govuk-radios__input"
type="radio"
value="Y"
/>
<label
for="married-radio-0"
class="govuk-label govuk-radios__label"
aria-hidden="false"
>
Yes
</label>
</div>
<div class="govuk-radios__item">
<input
name="married"
id="married-radio-1"
class="govuk-radios__input"
type="radio"
value="N"
/>
<label
for="married-radio-1"
class="govuk-label govuk-radios__label"
aria-hidden="false"
>
No
</label>
</div>
</div>
</fieldset>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Submit
</button>
</form>
<Form action="/result" method="get">
<Form.TextInput
name="fullName"
prettyName="name"
label={<h2>What is your name?</h2>}
hint="Write your firstname followed by your surname"
validators={[required()]}
/>
<Form.Radios
name="sex"
label={<h2>Sex?</h2>}
options={[
{
value: "male",
label: "Male",
},
{
value: "female",
label: "Female",
},
{
value: "no",
label: "No thanks, we're British",
},
]}
validators={[required("Provide your sex")]}
/>
<Form.DateInput
name="dob"
prettyName="date of birth"
label={<h2>What is your date of birth?</h2>}
validators={[
required("Provide your date of birth"),
past(),
after("1900-01-01")(),
]}
/>
<Form.Radios
name="married"
label={<h2>Are you married?</h2>}
options={[
{
value: "Y",
label: "Yes",
},
{
value: "N",
label: "No",
},
]}
validators={[
required("Provide your marital status"),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form>
Steps
Break up your form into steps, using Form.Page, to make it less overwhelming for the user.
<form action="/" class="not-govuk-form" method="get">
<div id="fullName" class="govuk-form-group">
<label
for="fullName-input"
class="govuk-label"
aria-hidden="false"
>
<h2>What is your name?</h2>
</label>
<div
id="fullName-hint"
class="govuk-hint"
aria-hidden="false"
>
Write your firstname followed by your surname
</div>
<input
name="fullName"
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form action="/result" method="get">
<Form.Page>
<Form.TextInput
name="fullName"
prettyName="name"
label={<h2>What is your name?</h2>}
hint="Write your firstname followed by your surname"
validators={[required()]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Page>
<Form.Radios
name="sex"
label={<h2>Sex?</h2>}
options={[
{
value: "male",
label: "Male",
},
{
value: "female",
label: "Female",
},
{
value: "no",
label: "No thanks, we're British",
},
]}
validators={[required("Provide your sex")]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Page>
<Form.DateInput
name="dob"
prettyName="date of birth"
label={<h2>What is your date of birth?</h2>}
validators={[
required("Provide your date of birth"),
past(),
after("1900-01-01")(),
]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Page>
<Form.Radios
name="married"
label={<h2>Are you married?</h2>}
options={[
{
value: "Y",
label: "Yes",
},
{
value: "N",
label: "No",
},
]}
validators={[
required("Provide your marital status"),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form.Page>
</Form>
Forks
Split your form's journey based on user input, using Form.Fork, to avoid requesting information you don't need.
The example below will send the user down a different path depending on their sex.
<form action="/" class="not-govuk-form" method="get">
<div id="fullName" class="govuk-form-group">
<label
for="fullName-input"
class="govuk-label"
aria-hidden="false"
>
<h2>What is your name?</h2>
</label>
<div
id="fullName-hint"
class="govuk-hint"
aria-hidden="false"
>
Write your firstname followed by your surname
</div>
<input
name="fullName"
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form action="/result" method="get">
<Form.Page>
<Form.TextInput
name="fullName"
prettyName="name"
label={<h2>What is your name?</h2>}
hint="Write your firstname followed by your surname"
validators={[required()]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Page>
<Form.Radios
name="sex"
label={<h2>Sex?</h2>}
options={[
{
value: "male",
label: "Male",
},
{
value: "female",
label: "Female",
},
{
value: "no",
label: "No thanks, we're British",
},
]}
validators={[required("Provide your sex")]}
/>
<Form.Submit>Continue</Form.Submit>
</Form.Page>
<Form.Fork
if={v => v.sex === "male"}
then={
<Form.Page>
<Form.DateInput
name="dob"
prettyName="date of birth"
label={<h2>What is your date of birth?</h2>}
validators={[
required("Provide your date of birth"),
past(),
after("1900-01-01")(),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form.Page>
}
else={
<Form.Page>
<Form.Radios
name="married"
label={<h2>Are you married?</h2>}
options={[
{
value: "Y",
label: "Yes",
},
{
value: "N",
label: "No",
},
]}
validators={[
required("Provide your marital status"),
]}
/>
<Form.Submit>Submit</Form.Submit>
</Form.Page>
}
/>
</Form>