Input

Default

Svelte code

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

<Input {...{
  label: {
    text: "National Insurance number"
  },
  id: "input-example",
  name: "test-name"
}} />

With hint text

Svelte code

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

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

With error message

Svelte code

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

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

With width2 class

Svelte code

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

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

With width3 class

Svelte code

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

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

With width4 class

Svelte code

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

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

With width5 class

Svelte code

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

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

With width10 class

Svelte code

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

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

With width20 class

Svelte code

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

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

With width30 class

Svelte code

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

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

With label as page heading

Svelte code

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

<Input {...{
  label: {
    text: "National Insurance number",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  id: "input-with-page-heading",
  name: "test-name"
}} />

With optional formGroup classes

Svelte code

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

<Input {...{
  label: {
    text: "National Insurance number"
  },
  id: "input-example",
  name: "test-name",
  formGroup: {
    classes: "extra-class"
  }
}} />

With autocomplete attribute

Svelte code

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

<Input {...{
  label: {
    text: "Postcode"
  },
  id: "input-with-autocomplete-attribute",
  name: "postcode",
  autocomplete: "postal-code"
}} />

With pattern attribute

Svelte code

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

<Input {...{
  label: {
    text: "Numbers only"
  },
  id: "input-with-pattern-attribute",
  name: "numbers-only",
  type: "number",
  pattern: "[0-9]*"
}} />

With spellcheck enabled

Svelte code

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

<Input {...{
  label: {
    text: "Spellcheck is enabled"
  },
  id: "input-with-spellcheck-enabled",
  name: "spellcheck",
  type: "text",
  spellcheck: true
}} />

With spellcheck disabled

Svelte code

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

<Input {...{
  label: {
    text: "Spellcheck is disabled"
  },
  id: "input-with-spellcheck-disabled",
  name: "spellcheck",
  type: "text",
  spellcheck: false
}} />

With prefix

Svelte code

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

<Input {...{
  label: {
    text: "Amount, in pounds"
  },
  id: "input-with-prefix",
  name: "amount",
  prefix: {
    text: "£"
  }
}} />

With suffix

Svelte code

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

<Input {...{
  label: {
    text: "Weight, in kilograms"
  },
  id: "input-with-suffix",
  name: "weight",
  suffix: {
    text: "kg"
  }
}} />

With prefix and suffix

Svelte code

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

<Input {...{
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  }
}} />

With prefix and long suffix

Svelte code

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

<Input {...{
  label: {
    text: "Cost per item, in pounds, per household member"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per household member"
  }
}} />

With prefix and suffix and error

Svelte code

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

<Input {...{
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  },
  errorMessage: {
    text: "Error message goes here"
  }
}} />

With prefix and suffix and width modifier

Svelte code

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

<Input {...{
  label: {
    text: "Cost per item, in pounds"
  },
  id: "input-with-prefix-suffix",
  name: "cost",
  classes: "govuk-input--width-5",
  prefix: {
    text: "£"
  },
  suffix: {
    text: "per item"
  }
}} />

With extra letter spacing

Svelte code

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

<Input {...{
  id: "input-with-extra-letter-spacing",
  label: {
    text: "National insurance number"
  },
  classes: "govuk-input--width-30 govuk-input--extra-letter-spacing",
  value: "QQ 12 34 56 C"
}} />