Skip to main contentComponents
Form
Unofficial Experimental
A component to collect information from the user.
Props
Stories
Standard
A standard Form.
Steps
Break up your form into steps, using Form.Page, to make it less overwhelming for the user.
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 class="not-govuk-form" action="/" 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
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
name="fullName"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form>
<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>
<form class="not-govuk-form" action="/" 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
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
name="fullName"
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
id="sex-radio-0"
class="govuk-radios__input"
type="radio"
name="sex"
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
id="sex-radio-1"
class="govuk-radios__input"
type="radio"
name="sex"
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
id="sex-radio-2"
class="govuk-radios__input"
type="radio"
name="sex"
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"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
type="text"
name="dob[day]"
value=""
/>
</div>
<div class="govuk-date-input__item">
<label
for="dob-month"
class="govuk-label"
aria-hidden="false"
>
Month
</label>
<input
id="dob-month"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
type="text"
name="dob[month]"
value=""
/>
</div>
<div class="govuk-date-input__item">
<label
for="dob-year"
class="govuk-label"
aria-hidden="false"
>
Year
</label>
<input
id="dob-year"
inputmode="numeric"
class="govuk-input govuk-input--width-4 govuk-date-input__input"
type="text"
name="dob[year]"
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
id="married-radio-0"
class="govuk-radios__input"
type="radio"
name="married"
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
id="married-radio-1"
class="govuk-radios__input"
type="radio"
name="married"
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>
<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>
<form class="not-govuk-form" action="/" 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
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
name="fullName"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form>
<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>
<form class="not-govuk-form" action="/" 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
aria-describedby="fullName-hint"
id="fullName-input"
class="govuk-input"
type="text"
name="fullName"
value=""
/>
</div>
<button
data-module="govuk-button"
type="submit"
class="govuk-button"
>
Continue
</button>
</form>
<Form>
<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>