Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

govuk-frontend

Package Overview
Dependencies
Maintainers
1
Versions
71
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

govuk-frontend - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

77

components/back-link/README.md
# Back link
## Introduction
## Installation
Link back component, to go back a page.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the back link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/back-link).
## Quick start examples
### Back link
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/back-link/preview)
#### Markup
<a href="#" class="govuk-back-link">Back</a>
#### Macro
{% from "back-link/macro.njk" import govukBackLink %}
{{ govukBackLink({
"href": "#"
}) }}
### Back link with custom text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/back-link/with-custom-text/preview)
#### Markup
<a href="#" class="govuk-back-link">Back to home</a>
#### Macro
{% from "back-link/macro.njk" import govukBackLink %}
{{ govukBackLink({
"href": "#",
"text": "Back to home"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -66,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/back-link/#options-example-default) for details.

242

components/breadcrumbs/README.md
# Breadcrumbs
## Introduction
## Installation
The Breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the breadcrumbs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/breadcrumbs).
## Quick start examples
### Breadcrumbs
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/preview)
#### Markup
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section">Section</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
</li>
</ol>
</div>
#### Macro
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{{ govukBreadcrumbs({
"items": [
{
"text": "Section",
"href": "/section"
},
{
"text": "Sub-section",
"href": "/section/sub-section"
}
]
}) }}
### Breadcrumbs with one level
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-one-level/preview)
#### Markup
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section">Section</a>
</li>
</ol>
</div>
#### Macro
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{{ govukBreadcrumbs({
"items": [
{
"text": "Section",
"href": "/section"
}
]
}) }}
### Breadcrumbs with multiple levels
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-multiple-levels/preview)
#### Markup
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/">Home</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section">Section</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section/sub-section">Sub-section</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/section/sub-section/sub-sub-section">Sub Sub-section</a>
</li>
</ol>
</div>
#### Macro
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{{ govukBreadcrumbs({
"items": [
{
"text": "Home",
"href": "/"
},
{
"text": "Section",
"href": "/section"
},
{
"text": "Sub-section",
"href": "/section/sub-section"
},
{
"text": "Sub Sub-section",
"href": "/section/sub-section/sub-sub-section"
}
]
}) }}
### Breadcrumbs without the home section
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/without-the-home-section/preview)
#### Markup
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/service-manual">Service Manual</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/service-manual/agile-delivery">Agile Delivery</a>
</li>
</ol>
</div>
#### Macro
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{{ govukBreadcrumbs({
"items": [
{
"text": "Service Manual",
"href": "/service-manual"
},
{
"text": "Agile Delivery",
"href": "/service-manual/agile-delivery"
}
]
}) }}
### Breadcrumbs with last breadcrumb as current page
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/breadcrumbs/with-last-breadcrumb-as-current-page/preview)
#### Markup
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/">Home</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/browse/abroad">Passports, travel and living abroad</a>
</li>
<li class="govuk-breadcrumbs__list-item" aria-current="page">Travel abroad</li>
</ol>
</div>
#### Macro
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{{ govukBreadcrumbs({
"items": [
{
"text": "Home",
"href": "/"
},
{
"text": "Passports, travel and living abroad",
"href": "/browse/abroad"
},
{
"text": "Travel abroad"
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -231,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/breadcrumbs/#options-example-default) for details.

178

components/button/README.md
# Button
## Introduction
## Installation
A button is an element that allows users to carry out an action on a GOV.UK page. Common use cases include allowing a user to **Start** an application or **Save and continue** their progress. A button should have a short text snippet that describes what it will do.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the button component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/button).
## Quick start examples
Buttons are configured to perform an action and they can have a different look. For example, they can be disabled until a valid action has been performed by the user.
### Button
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/preview)
#### Markup
<button type="submit" class="govuk-button">
Save and continue
</button>
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"text": "Save and continue"
}) }}
### Button disabled
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/disabled/preview)
#### Markup
<button type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled">
Disabled button
</button>
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"text": "Disabled button",
"disabled": true
}) }}
### Button link
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link/preview)
#### Markup
<a href="/" role="button" draggable="false" class="govuk-button">
Link button
</a>
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"text": "Link button",
"href": "/"
}) }}
### Button link disabled
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/link-disabled/preview)
#### Markup
<a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled">
Disabled link button
</a>
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"text": "Disabled link button",
"href": "/",
"disabled": true
}) }}
### Button start link
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/start-link/preview)
#### Markup
<a href="/" role="button" draggable="false" class="govuk-button govuk-button--start">
Start now link button
</a>
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"text": "Start now link button",
"href": "/",
"classes": "govuk-button--start"
}) }}
### Button input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input/preview)
#### Markup
<input value="Start now" name="start-now" type="submit" class="govuk-button">
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"element": "input",
"name": "start-now",
"text": "Start now"
}) }}
### Button input disabled
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/button/input-disabled/preview)
#### Markup
<input value="Explicit input button disabled" type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled">
#### Macro
{% from "button/macro.njk" import govukButton %}
{{ govukButton({
"element": "input",
"text": "Explicit input button disabled",
"disabled": true
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -167,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/button/#options-example-default) for details.

344

components/character-count/README.md
# Character count
## Introduction
## Installation
Help users enter text within a limited number of characters
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the character count component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/character-count).
## Quick start examples
### Character count
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10">
<div class="govuk-form-group">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<textarea class="govuk-textarea js-character-count " id="more-detail" name="more-detail" rows="5"></textarea>
</div>
<span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"name": "more-detail",
"id": "more-detail",
"maxlength": 10,
"label": {
"text": "Can you provide more detail?"
}
}) }}
### Character count with hint
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-hint/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10">
<div class="govuk-form-group">
<label class="govuk-label" for="with-hint">
Can you provide more detail?
</label>
<span id="with-hint-hint" class="govuk-hint">
Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
</span>
<textarea class="govuk-textarea js-character-count " id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-hint"></textarea>
</div>
<span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"name": "with-hint",
"id": "with-hint",
"maxlength": 10,
"label": {
"text": "Can you provide more detail?"
},
"hint": {
"text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
}
}) }}
### Character count with default value
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="100">
<div class="govuk-form-group">
<label class="govuk-label" for="with-default-value">
Full address
</label>
<textarea class="govuk-textarea js-character-count " id="with-default-value" name="default-value" rows="5">221B Baker Street
London
NW1 6XE
</textarea>
</div>
<span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 100 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "with-default-value",
"name": "default-value",
"maxlength": 100,
"label": {
"text": "Full address"
},
"value": "221B Baker Street\nLondon\nNW1 6XE\n"
}) }}
### Character count with default value exceeding limit
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-default-value-exceeding-limit/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10">
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="exceeding-characters">
Full address
</label>
<span id="exceeding-characters-error" class="govuk-error-message">
Please do not exceed the maximum allowed limit
</span>
<textarea class="govuk-textarea govuk-textarea--error js-character-count govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-error">221B Baker Street
London
NW1 6XE
</textarea>
</div>
<span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "exceeding-characters",
"name": "exceeding",
"maxlength": 10,
"value": "221B Baker Street\nLondon\nNW1 6XE\n",
"label": {
"text": "Full address"
},
"errorMessage": {
"text": "Please do not exceed the maximum allowed limit"
}
}) }}
### Character count with custom rows
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-custom-rows/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10">
<div class="govuk-form-group">
<label class="govuk-label" for="custom-rows">
Full address
</label>
<textarea class="govuk-textarea js-character-count " id="custom-rows" name="custom" rows="8"></textarea>
</div>
<span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "custom-rows",
"name": "custom",
"maxlength": 10,
"label": {
"text": "Full address"
},
"rows": 8
}) }}
### Character count with label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-label-as-page-heading/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10">
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="textarea-with-page-heading">
Full address
</label>
</h1>
<textarea class="govuk-textarea js-character-count " id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>
<span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "textarea-with-page-heading",
"name": "address",
"maxlength": 10,
"label": {
"text": "Full address",
"isPageHeading": true
}
}) }}
### Character count with word count
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-word-count/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxwords="10">
<div class="govuk-form-group">
<label class="govuk-label" for="word-count">
Full address
</label>
<textarea class="govuk-textarea js-character-count " id="word-count" name="word-count" rows="5"></textarea>
</div>
<span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 words
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "word-count",
"name": "word-count",
"maxwords": 10,
"label": {
"text": "Full address"
}
}) }}
### Character count with threshold
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/character-count/with-threshold/preview)
#### Markup
<div class="govuk-character-count" data-module="character-count" data-maxlength="10" data-threshold="75">
<div class="govuk-form-group">
<label class="govuk-label" for="with-threshold">
Full address
</label>
<textarea class="govuk-textarea js-character-count " id="with-threshold" name="with-threshold" rows="5"></textarea>
</div>
<span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
You can enter up to 10 characters
</span>
</div>
#### Macro
{% from "character-count/macro.njk" import govukCharacterCount %}
{{ govukCharacterCount({
"id": "with-threshold",
"name": "with-threshold",
"maxlength": 10,
"threshold": 75,
"label": {
"text": "Full address"
}
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -333,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/character-count/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/character-count/#options-example-default) for details.

709

components/checkboxes/README.md
# Checkboxes
## Introduction
## Installation
Let users select one or more options.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the checkboxes component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/checkboxes).
## Quick start examples
### Checkboxes
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="nationality-hint">
<legend class="govuk-fieldset__legend">
What is your nationality?
</legend>
<span id="nationality-hint" class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-1" name="nationality" type="checkbox" value="british">
<label class="govuk-label govuk-checkboxes__label" for="nationality-1">
British
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
Irish
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
Citizen of another country
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"idPrefix": "nationality",
"name": "nationality",
"fieldset": {
"legend": {
"text": "What is your nationality?"
}
},
"hint": {
"text": "If you have dual nationality, select all options that are relevant to you."
},
"items": [
{
"value": "british",
"text": "British"
},
{
"value": "irish",
"text": "Irish"
},
{
"value": "other",
"text": "Citizen of another country"
}
]
}) }}
### Checkboxes with id and name
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-id-and-name/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="undefined-hint">
<legend class="govuk-fieldset__legend">
What is your nationality?
</legend>
<span id="undefined-hint" class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="item_british" name="british" type="checkbox" value="yes">
<label class="govuk-label govuk-checkboxes__label" for="item_british">
British
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="item_irish" name="irish" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="item_irish">
Irish
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"fieldset": {
"legend": {
"text": "What is your nationality?"
}
},
"hint": {
"text": "If you have dual nationality, select all options that are relevant to you."
},
"items": [
{
"name": "british",
"id": "item_british",
"value": "yes",
"text": "British"
},
{
"name": "irish",
"id": "item_irish",
"value": "irish",
"text": "Irish"
}
]
}) }}
### Checkboxes with hints on items
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-hints-on-items/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
<h1 class="govuk-fieldset__heading">
How do you want to sign in?
</h1>
</legend>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="government-gateway" name="gateway" type="checkbox" value="gov-gateway" aria-describedby="government-gateway-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="government-gateway">
Sign in with Government Gateway
</label>
<span id="government-gateway-item-hint" class="govuk-hint govuk-checkboxes__hint">
You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.
</span>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="govuk-verify" name="verify" type="checkbox" value="gov-verify" aria-describedby="govuk-verify-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="govuk-verify">
Sign in with GOV.UK Verify
</label>
<span id="govuk-verify-item-hint" class="govuk-hint govuk-checkboxes__hint">
You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
</span>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"fieldset": {
"legend": {
"text": "How do you want to sign in?",
"isPageHeading": true
}
},
"items": [
{
"name": "gateway",
"id": "government-gateway",
"value": "gov-gateway",
"text": "Sign in with Government Gateway",
"hint": {
"text": "You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
}
},
{
"name": "verify",
"id": "govuk-verify",
"value": "gov-verify",
"text": "Sign in with GOV.UK Verify",
"hint": {
"text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
}
}
]
}) }}
### Checkboxes with disabled item
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled-item/preview)
#### Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
<label class="govuk-label govuk-checkboxes__label" for="colours-1">
Red
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
<label class="govuk-label govuk-checkboxes__label" for="colours-2">
Green
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue" disabled>
<label class="govuk-label govuk-checkboxes__label" for="colours-3">
Blue
</label>
</div>
</div>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue",
"disabled": true
}
]
}) }}
### Checkboxes with legend as a page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-legend-as-a-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="waste-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which types of waste do you transport regularly?
</h1>
</legend>
<span id="waste-hint" class="govuk-hint">
Select all that apply
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
<label class="govuk-label govuk-checkboxes__label" for="waste-1">
Waste from animal carcasses
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"name": "waste",
"fieldset": {
"legend": {
"text": "Which types of waste do you transport regularly?",
"classes": "govuk-fieldset__legend--l",
"isPageHeading": true
}
},
"hint": {
"text": "Select all that apply"
},
"items": [
{
"value": "animal",
"text": "Waste from animal carcasses"
},
{
"value": "mines",
"text": "Waste from mines or quarries"
},
{
"value": "farm",
"text": "Farm or agricultural waste"
}
]
}) }}
### Checkboxes with a medium legend
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-a-medium-legend/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="waste-hint waste-error">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Which types of waste do you transport regularly?
</legend>
<span id="waste-hint" class="govuk-hint">
Select all that apply
</span>
<span id="waste-error" class="govuk-error-message">
Select which types of waste you transport regularly
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
<label class="govuk-label govuk-checkboxes__label" for="waste-1">
Waste from animal carcasses
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"name": "waste",
"fieldset": {
"legend": {
"text": "Which types of waste do you transport regularly?",
"classes": "govuk-fieldset__legend--m"
}
},
"hint": {
"text": "Select all that apply"
},
"errorMessage": {
"text": "Select which types of waste you transport regularly"
},
"items": [
{
"value": "animal",
"text": "Waste from animal carcasses"
},
{
"value": "mines",
"text": "Waste from mines or quarries"
},
{
"value": "farm",
"text": "Farm or agricultural waste"
}
]
}) }}
### Checkboxes without fieldset
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/without-fieldset/preview)
#### Markup
<div class="govuk-form-group">
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-1" name="colours" type="checkbox" value="red">
<label class="govuk-label govuk-checkboxes__label" for="colours-1">
Red
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-2" name="colours" type="checkbox" value="green">
<label class="govuk-label govuk-checkboxes__label" for="colours-2">
Green
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="colours-3" name="colours" type="checkbox" value="blue">
<label class="govuk-label govuk-checkboxes__label" for="colours-3">
Blue
</label>
</div>
</div>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
]
}) }}
### Checkboxes with all fieldset attributes
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-all-fieldset-attributes/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset app-fieldset--custom-modifier" aria-describedby="example-hint example-error" data-attribute="value" data-second-attribute="second-value">
<legend class="govuk-fieldset__legend">
What is your nationality?
</legend>
<span id="example-hint" class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</span>
<span id="example-error" class="govuk-error-message">
Please select an option
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="example-1" name="example" type="checkbox" value="british">
<label class="govuk-label govuk-checkboxes__label" for="example-1">
British
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="example-2" name="example" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="example-2">
Irish
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="example-3" name="example" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="example-3">
Citizen of another country
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"idPrefix": "example",
"name": "example",
"fieldset": {
"classes": "app-fieldset--custom-modifier",
"attributes": {
"data-attribute": "value",
"data-second-attribute": "second-value"
},
"legend": {
"text": "What is your nationality?"
}
},
"hint": {
"text": "If you have dual nationality, select all options that are relevant to you."
},
"errorMessage": {
"text": "Please select an option"
},
"items": [
{
"value": "british",
"text": "British"
},
{
"value": "irish",
"text": "Irish"
},
{
"value": "other",
"text": "Citizen of another country"
}
]
}) }}
### Checkboxes with error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-error-message/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="waste-error">
<legend class="govuk-fieldset__legend">
Which types of waste do you transport regularly?
</legend>
<span id="waste-error" class="govuk-error-message">
Please select an option
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-1" name="waste" type="checkbox" value="animal">
<label class="govuk-label govuk-checkboxes__label" for="waste-1">
Waste from animal carcasses
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-2" name="waste" type="checkbox" value="mines">
<label class="govuk-label govuk-checkboxes__label" for="waste-2">
Waste from mines or quarries
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="waste-3" name="waste" type="checkbox" value="farm">
<label class="govuk-label govuk-checkboxes__label" for="waste-3">
Farm or agricultural waste
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
"name": "waste",
"errorMessage": {
"text": "Please select an option"
},
"fieldset": {
"legend": {
"text": "Which types of waste do you transport regularly?"
}
},
"items": [
{
"value": "animal",
"text": "Waste from animal carcasses"
},
{
"value": "mines",
"text": "Waste from mines or quarries"
},
{
"value": "farm",
"text": "Farm or agricultural waste"
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -698,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/checkboxes/#options-example-default) for details.

567

components/date-input/README.md
# Date input
## Introduction
## Installation
A component for entering dates, for example - date of birth.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the date input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/date-input).
## Quick start examples
### Date input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<div class="govuk-date-input" id="dob">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob",
"namePrefix": "dob",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
"items": [
{
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
### Date input with errors
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-errors/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-errors-hint dob-errors-error" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-errors-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<span id="dob-errors-error" class="govuk-error-message">
Error message goes here
</span>
<div class="govuk-date-input" id="dob-errors">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob-errors",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"name": "day",
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "month",
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "year",
"classes": "govuk-input--width-4 govuk-input--error"
}
]
}) }}
### Date input with error on day input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-day-input/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-day-error-hint dob-day-error-error" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-day-error-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<span id="dob-day-error-error" class="govuk-error-message">
Error message goes here
</span>
<div class="govuk-date-input" id="dob-day-error">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob-day-error",
"namePrefix": "dob-day-error",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"name": "day",
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
### Date input with error on month input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-month-input/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-month-error-hint dob-month-error-error" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-month-error-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<span id="dob-month-error-error" class="govuk-error-message">
Error message goes here
</span>
<div class="govuk-date-input" id="dob-month-error">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob-month-error",
"namePrefix": "dob-month-error",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month",
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
### Date input with error on year input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-error-on-year-input/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-year-error-hint dob-year-error-error" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-year-error-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<span id="dob-year-error-error" class="govuk-error-message">
Error message goes here
</span>
<div class="govuk-date-input" id="dob-year-error">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob-year-error",
"namePrefix": "dob-year-error",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year",
"classes": "govuk-input--width-4 govuk-input--error"
}
]
}) }}
### Date input with default items
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/date-input/with-default-items/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>
<span id="dob-hint" class="govuk-hint">
For example, 31 3 1980
</span>
<div class="govuk-date-input" id="dob">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "date-input/macro.njk" import govukDateInput %}
{{ govukDateInput({
"id": "dob",
"namePrefix": "dob",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
}
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -556,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/date-input/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/date-input/#options-example-default) for details.

132

components/details/README.md
# Details
## Introduction
## Installation
Component for conditionally revealing content, using the details HTML element.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/details).
## Quick start examples
### Details
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/preview)
#### Markup
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help with nationality
</span>
</summary>
<div class="govuk-details__text">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
</div>
</details>
#### Macro
{% from "details/macro.njk" import govukDetails %}
{{ govukDetails({
"summaryText": "Help with nationality",
"text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
}) }}
### Details expanded
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/expanded/preview)
#### Markup
<details id="help-with-nationality" class="govuk-details" open>
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Help with nationality
</span>
</summary>
<div class="govuk-details__text">
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
</div>
</details>
#### Macro
{% from "details/macro.njk" import govukDetails %}
{{ govukDetails({
"id": "help-with-nationality",
"summaryText": "Help with nationality",
"text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
"open": true
}) }}
### Details with html
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/details/with-html/preview)
#### Markup
<details class="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Where to find your National Insurance Number
</span>
</summary>
<div class="govuk-details__text">
Your National Insurance number can be found on
<ul>
<li>your National Insurance card</li>
<li>your payslip</li>
<li>P60</li>
<li>benefits information</li>
<li>tax return</li>
</ul>
</div>
</details>
#### Macro
{% from "details/macro.njk" import govukDetails %}
{{ govukDetails({
"summaryText": "Where to find your National Insurance Number",
"html": "Your National Insurance number can be found on\n<ul>\n <li>your National Insurance card</li>\n <li>your payslip</li>\n <li>P60</li>\n <li>benefits information</li>\n <li>tax return</li>\n</ul>\n"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -121,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/details/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/details/#options-example-default) for details.

62

components/error-message/README.md
# Error message
## Introduction
## Installation
Component to show a red error message - used for form validation. Use inside a label or legend.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
## Quick start examples
### Error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-message/preview)
#### Markup
<span class="govuk-error-message">
Error message about full name goes here
</span>
#### Macro
{% from "error-message/macro.njk" import govukErrorMessage %}
{{ govukErrorMessage({
"text": "Error message about full name goes here"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -51,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.

98

components/error-summary/README.md
# Error summary
## Introduction
## Installation
Component to show an error summary box - used at the top of the page, to summarise validation errors.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the error summary component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-summary).
## Quick start examples
### Error summary
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/error-summary/preview)
#### Markup
<div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
Message to alert the user to a problem goes here
</h2>
<div class="govuk-error-summary__body">
<p>
Optional description of the errors and how to correct them
</p>
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#example-error-1">Descriptive link to the question with an error</a>
</li>
<li>
<a href="#example-error-1">Descriptive link to the question with an error</a>
</li>
</ul>
</div>
</div>
#### Macro
{% from "error-summary/macro.njk" import govukErrorSummary %}
{{ govukErrorSummary({
"titleText": "Message to alert the user to a problem goes here",
"descriptionText": "Optional description of the errors and how to correct them",
"classes": "optional-extra-class",
"errorList": [
{
"text": "Descriptive link to the question with an error",
"href": "#example-error-1"
},
{
"text": "Descriptive link to the question with an error",
"href": "#example-error-1"
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -87,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/error-summary/#options-example-default) for details.

96

components/fieldset/README.md
# Fieldset
## Introduction
## Installation
The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the fieldset component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/fieldset).
## Quick start examples
### Fieldset
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/preview)
#### Markup
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
What is your address?
</legend>
</fieldset>
#### Macro
{% from "fieldset/macro.njk" import govukFieldset %}
{{ govukFieldset({
"legend": {
"text": "What is your address?"
}
}) }}
### Fieldset as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/fieldset/as-page-heading/preview)
#### Markup
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
<h1 class="govuk-fieldset__heading">
What is your address?
</h1>
</legend>
</fieldset>
#### Macro
{% from "fieldset/macro.njk" import govukFieldset %}
{{ govukFieldset({
"legend": {
"text": "What is your address?",
"classes": "govuk-fieldset__legend--xl",
"isPageHeading": true
}
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -85,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/fieldset/#options-example-default) for details.

203

components/file-upload/README.md
# File upload
## Introduction
## Installation
The HTML `<input>` element with type="file" lets a user pick one or more files, to upload to a server.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the file upload component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/file-upload).
## Quick start examples
### File upload
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="file-upload-1">
Upload a file
</label>
<input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>
#### Macro
{% from "file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
}
}) }}
### File upload with hint text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-hint-text/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="file-upload-2">
Upload your photo
</label>
<span id="file-upload-2-hint" class="govuk-hint">
Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
</span>
<input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>
#### Macro
{% from "file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
"id": "file-upload-2",
"name": "file-upload-2",
"label": {
"text": "Upload your photo"
},
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
}
}) }}
### File upload with error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-error-message/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="file-upload-3">
Upload a file
</label>
<span id="file-upload-3-hint" class="govuk-hint">
Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
</span>
<span id="file-upload-3-error" class="govuk-error-message">
Error message goes here
</span>
<input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
</div>
#### Macro
{% from "file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
"id": "file-upload-3",
"name": "file-upload-3",
"label": {
"text": "Upload a file"
},
"hint": {
"text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
},
"errorMessage": {
"text": "Error message goes here"
}
}) }}
### File upload with value and attributes
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-value-and-attributes/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="file-upload-4">
Upload a photo
</label>
<input class="govuk-file-upload" id="file-upload-4" name="file-upload-4" type="file" value="C:\fakepath\myphoto.jpg" accept=".jpg, .jpeg, .png">
</div>
#### Macro
{% from "file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
"id": "file-upload-4",
"name": "file-upload-4",
"value": "C:\\fakepath\\myphoto.jpg",
"label": {
"text": "Upload a photo"
},
"attributes": {
"accept": ".jpg, .jpeg, .png"
}
}) }}
### File upload with label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-label-as-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="file-upload-1">
Upload a file
</label>
</h1>
<input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>
#### Macro
{% from "file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
"id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file",
"isPageHeading": true
}
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -192,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default) for details.

95

components/footer/README.md
# Footer
## Introduction
## Installation
The footer component is used at the bottom of every GOV.UK page, to help users navigate.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer).
## Quick start examples
### Footer
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/footer/preview)
#### Markup
<footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<svg
role="presentation"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 483.2 195.7"
height="17"
width="41"
>
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
/>
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license"
>Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
>© Crown copyright</a>
</div>
</div>
</div>
</footer>
#### Macro
{% from "footer/macro.njk" import govukFooter %}
{{ govukFooter({}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -84,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details.

355

components/header/README.md
# Header
## Introduction
## Installation
The header component is used at the top of every GOV.UK page, to help users navigate.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header).
## Quick start examples
### Header
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/preview)
#### Markup
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg
role="presentation"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 132 97"
height="32"
width="36"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
</div>
</header>
#### Macro
{% from "header/macro.njk" import govukHeader %}
{{ govukHeader({}) }}
### Header with service name
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name/preview)
#### Markup
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg
role="presentation"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 132 97"
height="32"
width="36"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__link--service-name">
Service Name
</a>
</div>
</div>
</header>
#### Macro
{% from "header/macro.njk" import govukHeader %}
{{ govukHeader({
"serviceName": "Service Name",
"serviceUrl": "/components/header"
}) }}
### Header with navigation
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-navigation/preview)
#### Markup
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg
role="presentation"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 132 97"
height="32"
width="36"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<nav>
<ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<a class="govuk-header__link" href="#1">
Navigation item 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#2">
Navigation item 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#3">
Navigation item 3
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#4">
Navigation item 4
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
#### Macro
{% from "header/macro.njk" import govukHeader %}
{{ govukHeader({
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
}) }}
### Header with service name and navigation
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/header/with-service-name-and-navigation/preview)
#### Markup
<header class="govuk-header " role="banner" data-module="header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<svg
role="presentation"
focusable="false"
class="govuk-header__logotype-crown"
xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 132 97"
height="32"
width="36"
>
<path
fill="currentColor" fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a href="/components/header" class="govuk-header__link govuk-header__link--service-name">
Service Name
</a>
<button type="button" role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<nav>
<ul id="navigation" class="govuk-header__navigation " aria-label="Top Level Navigation">
<li class="govuk-header__navigation-item govuk-header__navigation-item--active">
<a class="govuk-header__link" href="#1">
Navigation item 1
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#2">
Navigation item 2
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#3">
Navigation item 3
</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="#4">
Navigation item 4
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
#### Macro
{% from "header/macro.njk" import govukHeader %}
{{ govukHeader({
"serviceName": "Service Name",
"serviceUrl": "/components/header",
"navigation": [
{
"href": "#1",
"text": "Navigation item 1",
"active": true
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -344,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details.

82

components/hint/README.md
# Hint
## Introduction
## Installation
Use hint text for supporting contextual help
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Quick start examples
## Guidance and Examples
### Hint
The label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/#using-hint-text).
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
#### Markup
<span class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60.
For example, ‘QQ 12 34 56 C’.
</span>
#### Macro
{% from "hint/macro.njk" import govukHint %}
{{ govukHint({
"text": "It’s on your National Insurance card, benefit letter, payslip or P60.\nFor example, ‘QQ 12 34 56 C’.\n"
}) }}
### Hint with html
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/hint/with-html/preview)
#### Markup
<span class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
For example, ‘QQ 12 34 56 C’.
</span>
#### Macro
{% from "hint/macro.njk" import govukHint %}
{{ govukHint({
"html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, ‘QQ 12 34 56 C’.\n"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -69,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--hint) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--hint) for details.

411

components/input/README.md
# Input
## Introduction
## Installation
A single-line text field.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the input component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/text-input).
## Quick start examples
### Input
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-example">
National Insurance number
</label>
<input class="govuk-input" id="input-example" name="test-name" type="text">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National Insurance number"
},
"id": "input-example",
"name": "test-name"
}) }}
### Input with hint text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-with-hint-text">
National insurance number
</label>
<span id="input-with-hint-text-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-with-hint-text",
"name": "test-name-2"
}) }}
### Input with error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="input-with-error-message">
National Insurance number
</label>
<span id="input-with-error-message-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<span id="input-with-error-message-error" class="govuk-error-message">
Error message goes here
</span>
<input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National Insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-with-error-message",
"name": "test-name-3",
"errorMessage": {
"text": "Error message goes here"
}
}) }}
### Input with width-2 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-2-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-2">
National insurance number
</label>
<span id="input-width-2-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-2",
"name": "test-width-2",
"classes": "govuk-input--width-2"
}) }}
### Input with width-3 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-3-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-3">
National insurance number
</label>
<span id="input-width-3-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-3",
"name": "test-width-3",
"classes": "govuk-input--width-3"
}) }}
### Input with width-4 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-4-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-4">
National insurance number
</label>
<span id="input-width-4-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-4",
"name": "test-width-4",
"classes": "govuk-input--width-4"
}) }}
### Input with width-5 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-5-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-5">
National insurance number
</label>
<span id="input-width-5-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-5",
"name": "test-width-5",
"classes": "govuk-input--width-5"
}) }}
### Input with width-10 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-10-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-10">
National insurance number
</label>
<span id="input-width-10-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-10",
"name": "test-width-10",
"classes": "govuk-input--width-10"
}) }}
### Input with width-20 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-20-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-20">
National insurance number
</label>
<span id="input-width-20-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-20",
"name": "test-width-20",
"classes": "govuk-input--width-20"
}) }}
### Input with width-30 class
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-width-30-class/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="input-width-30">
National insurance number
</label>
<span id="input-width-30-hint" class="govuk-hint">
It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
</span>
<input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National insurance number"
},
"hint": {
"text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
},
"id": "input-width-30",
"name": "test-width-30",
"classes": "govuk-input--width-30"
}) }}
### Input with label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="input-with-page-heading">
National Insurance number
</label>
</h1>
<input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
</div>
#### Macro
{% from "input/macro.njk" import govukInput %}
{{ govukInput({
"label": {
"text": "National Insurance number",
"isPageHeading": true
},
"id": "input-with-page-heading",
"name": "test-name"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -400,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/text-input/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/text-input/#options-example-default) for details.

80

components/inset-text/README.md
# Inset text
## Introduction
## Installation
Use bordered inset text to draw attention to important content on the page.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the inset text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/inset-text).
## Quick start examples
### Inset text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/preview)
#### Markup
<div class="govuk-inset-text">
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
</div>
#### Macro
{% from "inset-text/macro.njk" import govukInsetText %}
{{ govukInsetText({
"text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}
### Inset text with html
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/inset-text/with-html/preview)
#### Markup
<div class="govuk-inset-text">
It can take up to 8 weeks to register a <a class="govuk-link" href="#">lasting power of attorney</a> if there are no mistakes in the application.
</div>
#### Macro
{% from "inset-text/macro.njk" import govukInsetText %}
{{ govukInsetText({
"html": "It can take up to 8 weeks to register a <a class=\"govuk-link\" href=\"#\">lasting power of attorney</a> if there are no mistakes in the application."
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -69,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/inset-text/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/inset-text/#options-example-default) for details.

102

components/label/README.md
# Label
## Introduction
## Installation
Use labels for all form fields.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Quick start examples
## Guidance and Examples
### Label
The label component is used in other input components, to see an example of it in use see the [text input component](https://design-system.service.gov.uk/components/text-input/).
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/preview)
#### Markup
<label class="govuk-label">
National Insurance number
</label>
#### Macro
{% from "label/macro.njk" import govukLabel %}
{{ govukLabel({
"text": "National Insurance number"
}) }}
### Label with bold text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/with-bold-text/preview)
#### Markup
<label class="govuk-label govuk-label--s">
National Insurance number
</label>
#### Macro
{% from "label/macro.njk" import govukLabel %}
{{ govukLabel({
"classes": "govuk-label--s",
"text": "National Insurance number"
}) }}
### Label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/label/as-page-heading/preview)
#### Markup
<h1 class="govuk-label-wrapper">
<label class="govuk-label govuk-label--xl">
National Insurance number
</label>
</h1>
#### Macro
{% from "label/macro.njk" import govukLabel %}
{{ govukLabel({
"text": "National Insurance number",
"classes": "govuk-label--xl",
"isPageHeading": true
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -89,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--label) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/file-upload/#options-example-default--label) for details.

97

components/panel/README.md
# Panel
## Introduction
## Installation
The confirmation panel has a turquoise background and white text. Used for transaction end pages, and Bank Holidays.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the panel component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/panel).
## Quick start examples
### Panel
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/preview)
#### Markup
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number: HDJ2123F
</div>
</div>
#### Macro
{% from "panel/macro.njk" import govukPanel %}
{{ govukPanel({
"titleHtml": "Application complete",
"text": "Your reference number: HDJ2123F"
}) }}
### Panel custom heading level
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/panel/custom-heading-level/preview)
#### Markup
<div class="govuk-panel govuk-panel--confirmation">
<h2 class="govuk-panel__title">
Application complete
</h2>
<div class="govuk-panel__body">
Your reference number: HDJ2123F
</div>
</div>
#### Macro
{% from "panel/macro.njk" import govukPanel %}
{{ govukPanel({
"titleText": "Application complete",
"headingLevel": 2,
"text": "Your reference number: HDJ2123F"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -86,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/panel/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/panel/#options-example-default) for details.

71

components/phase-banner/README.md
# Phase banner
## Introduction
## Installation
A banner that indicates content is in alpha or beta phase with a description.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the phase banner component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/phase-banner).
## Quick start examples
### Phase banner
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/phase-banner/preview)
#### Markup
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content"><strong class="govuk-tag govuk-phase-banner__content__tag ">
alpha
</strong>
<span class="govuk-phase-banner__text">
This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
</span>
</p>
</div>
#### Macro
{% from "phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
"tag": {
"text": "alpha"
},
"html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -60,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/phase-banner/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/phase-banner/#options-example-default) for details.

669

components/radios/README.md
# Radios
## Introduction
## Installation
Let users select a single option from a list.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the radios component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/radios).
## Quick start examples
### Radios
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="example-hint">
<legend class="govuk-fieldset__legend">
Have you changed your name?
</legend>
<span id="example-hint" class="govuk-hint">
This includes changing your last name or spelling your name differently.
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-1" name="example" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="example-1">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-2" name="example" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="example-2">
No
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "example",
"name": "example",
"fieldset": {
"legend": {
"text": "Have you changed your name?"
}
},
"hint": {
"text": "This includes changing your last name or spelling your name differently."
},
"items": [
{
"value": "yes",
"text": "Yes"
},
{
"value": "no",
"text": "No",
"checked": true
}
]
}) }}
### Radios inline
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/inline/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="example&#39;-hint">
<legend class="govuk-fieldset__legend">
Have you changed your name?
</legend>
<span id="example&#39;-hint" class="govuk-hint">
This includes changing your last name or spelling your name differently.
</span>
<div class="govuk-radios govuk-radios--inline">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example&#39;-1" name="example" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="example&#39;-1">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example&#39;-2" name="example" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="example&#39;-2">
No
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "example'",
"classes": "govuk-radios--inline",
"name": "example",
"fieldset": {
"legend": {
"text": "Have you changed your name?"
}
},
"hint": {
"text": "This includes changing your last name or spelling your name differently."
},
"items": [
{
"value": "yes",
"text": "Yes"
},
{
"value": "no",
"text": "No",
"checked": true
}
]
}) }}
### Radios with disabled
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-disabled/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="example-disabled-hint">
<legend class="govuk-fieldset__legend">
Have you changed your name?
</legend>
<span id="example-disabled-hint" class="govuk-hint">
This includes changing your last name or spelling your name differently.
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-disabled-1" name="example-disabled" type="radio" value="yes" disabled>
<label class="govuk-label govuk-radios__label" for="example-disabled-1">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-disabled-2" name="example-disabled" type="radio" value="no" disabled>
<label class="govuk-label govuk-radios__label" for="example-disabled-2">
No
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "example-disabled",
"name": "example-disabled",
"fieldset": {
"legend": {
"text": "Have you changed your name?"
}
},
"hint": {
"text": "This includes changing your last name or spelling your name differently."
},
"items": [
{
"value": "yes",
"text": "Yes",
"disabled": true
},
{
"value": "no",
"text": "No",
"disabled": true
}
]
}) }}
### Radios with legend as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-legend-as-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="housing-act-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which part of the Housing Act was your licence issued under?
</h1>
</legend>
<span id="housing-act-hint" class="govuk-hint">
Select one of the options below.
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="housing-act-1" name="housing-act" type="radio" value="part-2">
<label class="govuk-label govuk-radios__label" for="housing-act-1">
<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="housing-act-2" name="housing-act" type="radio" value="part-3">
<label class="govuk-label govuk-radios__label" for="housing-act-2">
<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "housing-act",
"name": "housing-act",
"fieldset": {
"legend": {
"text": "Which part of the Housing Act was your licence issued under?",
"classes": "govuk-fieldset__legend--l",
"isPageHeading": true
}
},
"hint": {
"text": "Select one of the options below."
},
"items": [
{
"value": "part-2",
"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people"
},
{
"value": "part-3",
"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council"
}
]
}) }}
### Radios with a medium legend
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-medium-legend/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="housing-act-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
Which part of the Housing Act was your licence issued under?
</legend>
<span id="housing-act-hint" class="govuk-hint">
Select one of the options below.
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="housing-act-1" name="housing-act" type="radio" value="part-2">
<label class="govuk-label govuk-radios__label" for="housing-act-1">
<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="housing-act-2" name="housing-act" type="radio" value="part-3">
<label class="govuk-label govuk-radios__label" for="housing-act-2">
<span class="govuk-heading-s govuk-!-margin-bottom-1">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "housing-act",
"name": "housing-act",
"fieldset": {
"legend": {
"text": "Which part of the Housing Act was your licence issued under?",
"classes": "govuk-fieldset__legend--m"
}
},
"hint": {
"text": "Select one of the options below."
},
"items": [
{
"value": "part-2",
"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people"
},
{
"value": "part-3",
"html": "<span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council"
}
]
}) }}
### Radios with a divider
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-a-divider/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
How do you want to sign in?
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-divider-1" name="example" type="radio" value="governement-gateway">
<label class="govuk-label govuk-radios__label" for="example-divider-1">
Use Government Gateway
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-divider-2" name="example" type="radio" value="govuk-verify">
<label class="govuk-label govuk-radios__label" for="example-divider-2">
Use GOV.UK Verify
</label>
</div>
<div class="govuk-radios__divider">or</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-divider-4" name="example" type="radio" value="create-account">
<label class="govuk-label govuk-radios__label" for="example-divider-4">
Create an account
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "example-divider",
"name": "example",
"fieldset": {
"legend": {
"text": "How do you want to sign in?"
}
},
"items": [
{
"value": "governement-gateway",
"text": "Use Government Gateway"
},
{
"value": "govuk-verify",
"text": "Use GOV.UK Verify"
},
{
"divider": "or"
},
{
"value": "create-account",
"text": "Create an account"
}
]
}) }}
### Radios with hints on items
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-hints-on-items/preview)
#### Markup
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend">
<h1 class="govuk-fieldset__heading">
How do you want to sign in?
</h1>
</legend>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="gov-1" name="gov" type="radio" value="gateway" aria-describedby="gov-1-item-hint">
<label class="govuk-label govuk-radios__label" for="gov-1">
Sign in with Government Gateway
</label>
<span id="gov-1-item-hint" class="govuk-hint govuk-radios__hint">
You&#39;ll have a user ID if you&#39;ve registered for Self Assessment or filed a tax return online before.
</span>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="gov-2" name="gov" type="radio" value="verify" aria-describedby="gov-2-item-hint">
<label class="govuk-label govuk-radios__label" for="gov-2">
Sign in with GOV.UK Verify
</label>
<span id="gov-2-item-hint" class="govuk-hint govuk-radios__hint">
You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
</span>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "gov",
"name": "gov",
"fieldset": {
"legend": {
"text": "How do you want to sign in?",
"isPageHeading": true
}
},
"items": [
{
"value": "gateway",
"text": "Sign in with Government Gateway",
"hint": {
"text": "You'll have a user ID if you've registered for Self Assessment or filed a tax return online before."
}
},
{
"value": "verify",
"text": "Sign in with GOV.UK Verify",
"hint": {
"text": "You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
}
}
]
}) }}
### Radios without fieldset
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/without-fieldset/preview)
#### Markup
<div class="govuk-form-group">
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="colours-1" name="colours" type="radio" value="red">
<label class="govuk-label govuk-radios__label" for="colours-1">
Red
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="colours-2" name="colours" type="radio" value="green">
<label class="govuk-label govuk-radios__label" for="colours-2">
Green
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="colours-3" name="colours" type="radio" value="blue">
<label class="govuk-label govuk-radios__label" for="colours-3">
Blue
</label>
</div>
</div>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"name": "colours",
"items": [
{
"value": "red",
"text": "Red"
},
{
"value": "green",
"text": "Green"
},
{
"value": "blue",
"text": "Blue"
}
]
}) }}
### Radios with all fieldset attributes
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/radios/with-all-fieldset-attributes/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset app-fieldset--custom-modifier" aria-describedby="example-hint example-error" data-attribute="value" data-second-attribute="second-value">
<legend class="govuk-fieldset__legend">
Have you changed your name?
</legend>
<span id="example-hint" class="govuk-hint">
This includes changing your last name or spelling your name differently.
</span>
<span id="example-error" class="govuk-error-message">
Please select an option
</span>
<div class="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-1" name="example" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="example-1">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="example-2" name="example" type="radio" value="no" checked>
<label class="govuk-label govuk-radios__label" for="example-2">
No
</label>
</div>
</div>
</fieldset>
</div>
#### Macro
{% from "radios/macro.njk" import govukRadios %}
{{ govukRadios({
"idPrefix": "example",
"name": "example",
"errorMessage": {
"text": "Please select an option"
},
"fieldset": {
"classes": "app-fieldset--custom-modifier",
"attributes": {
"data-attribute": "value",
"data-second-attribute": "second-value"
},
"legend": {
"text": "Have you changed your name?"
}
},
"hint": {
"text": "This includes changing your last name or spelling your name differently."
},
"items": [
{
"value": "yes",
"text": "Yes"
},
{
"value": "no",
"text": "No",
"checked": true
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -658,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/radios/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/radios/#options-example-default) for details.

261

components/select/README.md
# Select
## Introduction
## Installation
The HTML `<select>` element represents a control that provides a menu of options.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the select component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/select).
## Quick start examples
### Select
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="select-1">
Label text goes here
</label>
<select class="govuk-select" id="select-1" name="select-1">
<option value="1">GOV.UK frontend option 1</option>
<option value="2" selected>GOV.UK frontend option 2</option>
<option value="3" disabled>GOV.UK frontend option 3</option>
</select>
</div>
#### Macro
{% from "select/macro.njk" import govukSelect %}
{{ govukSelect({
"id": "select-1",
"name": "select-1",
"label": {
"text": "Label text goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
}) }}
### Select with hint text and error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-hint-text-and-error-message/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="select-2">
Label text goes here
</label>
<span id="select-2-hint" class="govuk-hint">
Hint text goes here
</span>
<span id="select-2-error" class="govuk-error-message">
Error message goes here
</span>
<select class="govuk-select govuk-select--error" id="select-2" name="select-2" aria-describedby="select-2-hint select-2-error">
<option value="1">GOV.UK frontend option 1</option>
<option value="2">GOV.UK frontend option 2</option>
<option value="3">GOV.UK frontend option 3</option>
</select>
</div>
#### Macro
{% from "select/macro.njk" import govukSelect %}
{{ govukSelect({
"id": "select-2",
"name": "select-2",
"label": {
"text": "Label text goes here"
},
"hint": {
"text": "Hint text goes here"
},
"errorMessage": {
"text": "Error message goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2"
},
{
"value": 3,
"text": "GOV.UK frontend option 3"
}
]
}) }}
### Select with label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-label-as-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="select-3">
Label text goes here
</label>
</h1>
<select class="govuk-select" id="select-3" name="select-3">
<option value="1">GOV.UK frontend option 1</option>
<option value="2" selected>GOV.UK frontend option 2</option>
<option value="3" disabled>GOV.UK frontend option 3</option>
</select>
</div>
#### Macro
{% from "select/macro.njk" import govukSelect %}
{{ govukSelect({
"id": "select-3",
"name": "select-3",
"label": {
"text": "Label text goes here",
"isPageHeading": true
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
}) }}
### Select with full width override
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/select/with-full-width-override/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="select-1">
Label text goes here
</label>
<select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
<option value="1">GOV.UK frontend option 1</option>
<option value="2" selected>GOV.UK frontend option 2</option>
<option value="3" disabled>GOV.UK frontend option 3</option>
</select>
</div>
#### Macro
{% from "select/macro.njk" import govukSelect %}
{{ govukSelect({
"id": "select-1",
"name": "select-1",
"classes": "govuk-!-width-full",
"label": {
"text": "Label text goes here"
},
"items": [
{
"value": 1,
"text": "GOV.UK frontend option 1"
},
{
"value": 2,
"text": "GOV.UK frontend option 2",
"selected": true
},
{
"value": 3,
"text": "GOV.UK frontend option 3",
"disabled": true
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -250,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/select/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/select/#options-example-default) for details.

61

components/skip-link/README.md
# Skip link
## Introduction
## Installation
Skip link component. Make skip links visible when they are tabbed to. You'll need to add correct id to your main content area, to ensure the skip link will work.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link).
## Quick start examples
### Skip link
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/skip-link/preview)
#### Markup
<a href="#content" class="govuk-skip-link">Skip to main content</a>
#### Macro
{% from "skip-link/macro.njk" import govukSkipLink %}
{{ govukSkipLink({
"text": "Skip to main content",
"href": "#content"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -50,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details.

372

components/table/README.md
# Table
## Introduction
## Installation
Table description.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the table component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/table).
## Quick start examples
### Table
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/preview)
#### Markup
<table class="govuk-table">
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">January</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">February</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">March</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
</tr>
</tbody>
</table>
#### Macro
{% from "table/macro.njk" import govukTable %}
{{ govukTable({
"rows": [
[
{
"text": "January"
},
{
"text": "£85",
"format": "numeric"
},
{
"text": "£95",
"format": "numeric"
}
],
[
{
"text": "February"
},
{
"text": "£75",
"format": "numeric"
},
{
"text": "£55",
"format": "numeric"
}
],
[
{
"text": "March"
},
{
"text": "£165",
"format": "numeric"
},
{
"text": "£125",
"format": "numeric"
}
]
]
}) }}
### Table table with head
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head/preview)
#### Markup
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Month you apply</th>
<th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for bicycles</th>
<th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for vehicles</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">January</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">February</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">March</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
</tr>
</tbody>
</table>
#### Macro
{% from "table/macro.njk" import govukTable %}
{{ govukTable({
"head": [
{
"text": "Month you apply"
},
{
"text": "Rate for bicycles",
"format": "numeric"
},
{
"text": "Rate for vehicles",
"format": "numeric"
}
],
"rows": [
[
{
"text": "January"
},
{
"text": "£85",
"format": "numeric"
},
{
"text": "£95",
"format": "numeric"
}
],
[
{
"text": "February"
},
{
"text": "£75",
"format": "numeric"
},
{
"text": "£55",
"format": "numeric"
}
],
[
{
"text": "March"
},
{
"text": "£165",
"format": "numeric"
},
{
"text": "£125",
"format": "numeric"
}
]
]
}) }}
### Table table with head and caption
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/table/table-with-head-and-caption/preview)
#### Markup
<table class="govuk-table">
<caption class="govuk-table__caption govuk-heading-m">Caption 1: Months and rates</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Month you apply</th>
<th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for bicycles</th>
<th class="govuk-table__header govuk-table__header--numeric" scope="col">Rate for vehicles</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">January</th>
<td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">February</th>
<td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">March</th>
<td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
<td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
</tr>
</tbody>
</table>
#### Macro
{% from "table/macro.njk" import govukTable %}
{{ govukTable({
"caption": "Caption 1: Months and rates",
"captionClasses": "govuk-heading-m",
"firstCellIsHeader": true,
"head": [
{
"text": "Month you apply"
},
{
"text": "Rate for bicycles",
"format": "numeric"
},
{
"text": "Rate for vehicles",
"format": "numeric"
}
],
"rows": [
[
{
"text": "January"
},
{
"text": "£85",
"format": "numeric"
},
{
"text": "£95",
"format": "numeric"
}
],
[
{
"text": "February"
},
{
"text": "£75",
"format": "numeric"
},
{
"text": "£55",
"format": "numeric"
}
],
[
{
"text": "March"
},
{
"text": "£165",
"format": "numeric"
},
{
"text": "£125",
"format": "numeric"
}
]
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -361,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/table/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/table/#options-example-default) for details.

246

components/tabs/README.md
# Tabs
## Introduction
## Installation
Component for conditionally revealing content, using tabs and tabs panels.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the tabs component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tabs).
## Quick start examples
### Tabs
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tabs/preview)
#### Markup
<div class="govuk-tabs" data-module="tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab govuk-tabs__tab--selected" href="#past-day">
Past day
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-week">
Past week
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-month">
Past month
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-year">
Past year
</a>
</li>
</ul>
<section class="govuk-tabs__panel" id="past-day">
<h2 class="govuk-heading-l">Past day</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Case manager</th>
<th class="govuk-table__header" scope="col">Cases opened</th>
<th class="govuk-table__header" scope="col">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">3</td>
<td class="govuk-table__cell">0</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">1</td>
<td class="govuk-table__cell">0</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">2</td>
<td class="govuk-table__cell">0</td>
</tr>
</tbody>
</table>
</section>
<section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
<h2 class="govuk-heading-l">Past week</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Case manager</th>
<th class="govuk-table__header" scope="col">Cases opened</th>
<th class="govuk-table__header" scope="col">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">24</td>
<td class="govuk-table__cell">18</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">16</td>
<td class="govuk-table__cell">20</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">24</td>
<td class="govuk-table__cell">27</td>
</tr>
</tbody>
</table>
</section>
<section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
<h2 class="govuk-heading-l">Past month</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Case manager</th>
<th class="govuk-table__header" scope="col">Cases opened</th>
<th class="govuk-table__header" scope="col">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">98</td>
<td class="govuk-table__cell">95</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">122</td>
<td class="govuk-table__cell">131</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">126</td>
<td class="govuk-table__cell">142</td>
</tr>
</tbody>
</table>
</section>
<section class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
<h2 class="govuk-heading-l">Past year</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">Case manager</th>
<th class="govuk-table__header" scope="col">Cases opened</th>
<th class="govuk-table__header" scope="col">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">1380</td>
<td class="govuk-table__cell">1472</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">1129</td>
<td class="govuk-table__cell">1083</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">1539</td>
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
</table>
</section>
</div>
#### Macro
{% from "tabs/macro.njk" import govukTabs %}
{{ govukTabs({
"items": [
{
"label": "Past day",
"id": "past-day",
"panel": {
"html": "<h2 class=\"govuk-heading-l\">Past day</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">3</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">2</td>\n <td class=\"govuk-table__cell\">0</td>\n </tr>\n </tbody>\n</table>\n"
}
},
{
"label": "Past week",
"id": "past-week",
"panel": {
"html": "<h2 class=\"govuk-heading-l\">Past week</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">18</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">16</td>\n <td class=\"govuk-table__cell\">20</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">24</td>\n <td class=\"govuk-table__cell\">27</td>\n </tr>\n </tbody>\n</table>\n"
}
},
{
"label": "Past month",
"id": "past-month",
"panel": {
"html": "<h2 class=\"govuk-heading-l\">Past month</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">98</td>\n <td class=\"govuk-table__cell\">95</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">122</td>\n <td class=\"govuk-table__cell\">131</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">126</td>\n <td class=\"govuk-table__cell\">142</td>\n </tr>\n </tbody>\n</table>\n"
}
},
{
"label": "Past year",
"id": "past-year",
"panel": {
"html": "<h2 class=\"govuk-heading-l\">Past year</h2>\n<table class=\"govuk-table\">\n <thead class=\"govuk-table__head\">\n <tr class=\"govuk-table__row\">\n <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n </tr>\n </thead>\n <tbody class=\"govuk-table__body\">\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">David Francis</td>\n <td class=\"govuk-table__cell\">1380</td>\n <td class=\"govuk-table__cell\">1472</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Paul Farmer</td>\n <td class=\"govuk-table__cell\">1129</td>\n <td class=\"govuk-table__cell\">1083</td>\n </tr>\n <tr class=\"govuk-table__row\">\n <td class=\"govuk-table__cell\">Rita Patel</td>\n <td class=\"govuk-table__cell\">1539</td>\n <td class=\"govuk-table__cell\">1265</td>\n </tr>\n </tbody>\n</table>\n"
}
}
]
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -235,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/tabs/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/tabs/#options-example-default) for details.

81

components/tag/README.md
# Tag
## Introduction
## Installation
Phase tags are mostly used inside phase banners as an indication of the state of a project. It’s possible to use them outside phase banners, for example as part of a service header.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the tag component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/tag).
## Quick start examples
### Tag
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
#### Markup
<strong class="govuk-tag">
alpha
</strong>
#### Macro
{% from "tag/macro.njk" import govukTag %}
{{ govukTag({
"text": "alpha"
}) }}
### Tag inactive
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
#### Markup
<strong class="govuk-tag govuk-tag--inactive">
alpha
</strong>
#### Macro
{% from "tag/macro.njk" import govukTag %}
{{ govukTag({
"text": "alpha",
"classes": "govuk-tag--inactive"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -70,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/tag/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/tag/#options-example-default) for details.

197

components/textarea/README.md
# Textarea
## Introduction
## Installation
A multi-line text field.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the textarea component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/textarea).
## Quick start examples
### Textarea
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="more-detail">
Can you provide more detail?
</label>
<span id="more-detail-hint" class="govuk-hint">
Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
</span>
<textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>
#### Macro
{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
"name": "more-detail",
"id": "more-detail",
"label": {
"text": "Can you provide more detail?"
},
"hint": {
"text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
}
}) }}
### Textarea with error message
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-error-message/preview)
#### Markup
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="no-ni-reason">
Why can&#39;t you provide a National Insurance number?
</label>
<span id="no-ni-reason-error" class="govuk-error-message">
You must provide an explanation
</span>
<textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
</div>
#### Macro
{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
"name": "no-ni-reason",
"id": "no-ni-reason",
"label": {
"text": "Why can't you provide a National Insurance number?"
},
"errorMessage": {
"text": "You must provide an explanation"
}
}) }}
### Textarea with default value
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-default-value/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="full-address">
Full address
</label>
<textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
London
NW1 6XE
</textarea>
</div>
#### Macro
{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
"id": "full-address",
"name": "address",
"value": "221B Baker Street\nLondon\nNW1 6XE\n",
"label": {
"text": "Full address"
}
}) }}
### Textarea with custom rows
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-custom-rows/preview)
#### Markup
<div class="govuk-form-group">
<label class="govuk-label" for="full-address">
Full address
</label>
<textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
</div>
#### Macro
{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
"id": "full-address",
"name": "address",
"label": {
"text": "Full address"
},
"rows": 8
}) }}
### Textarea with label as page heading
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/textarea/with-label-as-page-heading/preview)
#### Markup
<div class="govuk-form-group">
<h1 class="govuk-label-wrapper">
<label class="govuk-label" for="textarea-with-page-heading">
Full address
</label>
</h1>
<textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>
#### Macro
{% from "textarea/macro.njk" import govukTextarea %}
{{ govukTextarea({
"id": "textarea-with-page-heading",
"name": "address",
"label": {
"text": "Full address",
"isPageHeading": true
}
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -186,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/textarea/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/textarea/#options-example-default) for details.

67

components/warning-text/README.md
# Warning text
## Introduction
## Installation
Use bold text with an exclamation icon if there are consequences - for example, a fine or prison sentence.
See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
## Guidance
## Guidance and Examples
Find out when to use the warning text component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/warning-text).
## Quick start examples
### Warning text
[Preview this example in the Frontend review app](http://govuk-frontend-review.herokuapp.com/components/warning-text/preview)
#### Markup
<div class="govuk-warning-text">
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
<strong class="govuk-warning-text__text">
<span class="govuk-warning-text__assistive">Warning</span>
You can be fined up to £5,000 if you don’t register.
</strong>
</div>
#### Macro
{% from "warning-text/macro.njk" import govukWarningText %}
{{ govukWarningText({
"text": "You can be fined up to £5,000 if you don’t register.",
"iconFallbackText": "Warning"
}) }}
## Requirements
### Build tool configuration
When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
.pipe(sass({
includePaths: 'node_modules/'
}))
### Static asset path configuration
In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
## Component options

@@ -56,20 +15,2 @@

See [options table](https://design-system.service.gov.uk/components/warning-text/#options-example-default) for details.
### Setting up Nunjucks views and paths
Below is an example setup using express configure views:
nunjucks.configure('node_modules/govuk-frontend/components', {
autoescape: true,
cache: false,
express: app
})
## Contribution
Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
## License
MIT
See [options table](https://design-system.service.gov.uk/components/warning-text/#options-example-default) for details.

2

package.json
{
"name": "govuk-frontend",
"description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
"version": "2.4.0",
"version": "2.4.1",
"main": "all.js",

@@ -6,0 +6,0 @@ "sass": "all.scss",

components/character-count/template.njk

Sorry, the diff of this file is not supported yet

components/checkboxes/template.njk

Sorry, the diff of this file is not supported yet

components/date-input/template.njk

Sorry, the diff of this file is not supported yet

components/file-upload/template.njk

Sorry, the diff of this file is not supported yet

components/footer/_footer.scss

Sorry, the diff of this file is not supported yet

components/input/template.njk

Sorry, the diff of this file is not supported yet

components/radios/template.njk

Sorry, the diff of this file is not supported yet

components/select/template.njk

Sorry, the diff of this file is not supported yet

components/textarea/template.njk

Sorry, the diff of this file is not supported yet

components/warning-text/_warning-text.scss

Sorry, the diff of this file is not supported yet

core/_lists.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc