DateInput

Default

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob"
}} />

Complete question

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  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"
    }
  ]
}} />

With errors only

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob-errors",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  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"
    }
  ]
}} />

With errors and hint

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  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"
    }
  ]
}} />

With error on day input

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  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"
    }
  ]
}} />

With error on month input

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  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"
    }
  ]
}} />

With error on year input

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  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"
    }
  ]
}} />

With default items

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob",
  namePrefix: "dob",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  }
}} />

With optional formGroup classes

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob",
  namePrefix: "dob",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  formGroup: {
    classes: "extra-class"
  }
}} />

With autocomplete values

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob-with-autocomplete-attribute",
  namePrefix: "dob-with-autocomplete",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  items: [
    {
      name: "day",
      classes: "govuk-input--width-2",
      autocomplete: "bday-day"
    },
    {
      name: "month",
      classes: "govuk-input--width-2",
      autocomplete: "bday-month"
    },
    {
      name: "year",
      classes: "govuk-input--width-4",
      autocomplete: "bday-year"
    }
  ]
}} />

With input attributes

Svelte code

<script>
	import { DateInput } from '@danboscaro/govuk-svelte'
</script>

<DateInput {...{
  id: "dob-with-input-attributes",
  namePrefix: "dob-with-input-attributes",
  fieldset: {
    legend: {
      text: "What is your date of birth?"
    }
  },
  hint: {
    text: "For example, 31 3 1980"
  },
  items: [
    {
      name: "day",
      classes: "govuk-input--width-2",
      attributes: {
        data-example-day: "day"
      }
    },
    {
      name: "month",
      classes: "govuk-input--width-2",
      attributes: {
        data-example-month: "month"
      }
    },
    {
      name: "year",
      classes: "govuk-input--width-4",
      attributes: {
        data-example-year: "year"
      }
    }
  ]
}} />