GOV.UK Frontend Types

GOV.UK Frontend Types contains jsdoc types and schema for the components contained in the GDS Design System.

Install

npm i govuk-frontend-types

Usage

Types

Use the types for intellisense, linting and checking JS code

/**
 * @type {import('govuk-frontend-types/types.js').DateInput}
 */
const dateOptions = {
  id: 'dob',
  namePrefix: 'dob',
  fieldset: {
    legend: {
      text: 'What is your date of birth?',
      html: '',
      isPageHeading: true,
      classes: 'govuk-fieldset__legend--xl',
    },
  },
  hint: {
    text: 'For example, 31 3 1980',
    html: ''
  },
}

Schema

Use joi schemas for validating component config

import { dateInputSchema } from 'govuk-frontend-types/schema.js'

const { value, error } = dateInputSchema.validate(dateOptions)