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
}
]
}} />