A set of encapsulated Web Components consuming the GOV.UK Design System.
Please note this package is not affiliated to GOV.UK but consumes code as distributed in the govuk-frontend npm package (v3.8.0).
npm install --save govuk-webcomponentsPlease visit the Storybook site for demos and code examples.
- <govukwc-accordion>
- <govukwc-back-link>
- <govukwc-breadcrumbs>
- <govukwc-button>
- <govukwc-character-count>
- <govukwc-checkboxes>
- <govukwc-date-input>
- <govukwc-details>
- <govukwc-error-summary>
- <govukwc-fieldset>
- <govukwc-file-upload>
- <govukwc-inset-text>
- <govukwc-panel>
- <govukwc-phase-banner>
- <govukwc-radios>
- <govukwc-select>
- <govukwc-skip-link>
- <govukwc-summary-list>
- <govukwc-table>
- <govukwc-tabs>
- <govukwc-tag>
- <govukwc-text-input>
- <govukwc-textarea>
- <govukwc-warning-text>
The web components are distributed as ES modules and can be used with any platform.
To quickly try the components import the modules directly in the browser and serve with a process that supports bare module specifier resolution such as es-dev-server.
<body>
<govukwc-button label="Save and continue"></govukwc-button>
<script type="module">
import 'govuk-webcomponents/components/govukwc-button/govukwc-button';
</script>
</body>To support browsers (down to IE11) a combination of polyfills and build steps will need to be taken.
At a highlevel outline the following is required:
- Transpiling to ES5 will be required using build tools such as Webpack or Rollup.
- The webcomponents.js pollyfills will need to be loaded.