Select

Default

Svelte code

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

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

With no items

Svelte code

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

<Select {...{
  id: "select-1",
  name: "select-1",
  label: {
    text: "Horse with no name"
  },
  items: []
}} />

With selected value

Svelte code

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

<Select {...{
  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"
    },
    {
      value: 3,
      text: "GOV.UK frontend option 3",
      disabled: true
    }
  ],
  value: 2
}} />

With hint text and error message

Svelte code

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

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

With label as page heading

Svelte code

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

<Select {...{
  id: "select-3",
  name: "select-3",
  label: {
    text: "Label text goes here",
    classes: "govuk-label--l",
    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
    }
  ]
}} />

With full width override

Svelte code

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

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

With optional formGroup classes

Svelte code

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

<Select {...{
  id: "select-1",
  name: "select-1",
  classes: "govuk-!-width-full",
  label: {
    text: "Label text goes here"
  },
  formGroup: {
    classes: "extra-class"
  },
  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
    }
  ]
}} />