Textarea

Default

Svelte code

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

<Textarea {...{
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  }
}} />

With hint

Svelte code

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

<Textarea {...{
  name: "more-detail",
  id: "more-detail",
  label: {
    text: "Can you provide more detail?"
  },
  hint: {
    text: "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}} />

With error message

Svelte code

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

<Textarea {...{
  name: "no-ni-reason",
  id: "no-ni-reason",
  label: {
    text: "Why can’t you provide a National Insurance number?"
  },
  errorMessage: {
    text: "You must provide an explanation"
  }
}} />

With default value

Svelte code

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

<Textarea {...{
  id: "full-address",
  name: "address",
  value: "221B Baker Street\nLondon\nNW1 6XE\n",
  label: {
    text: "Full address"
  }
}} />

With custom rows

Svelte code

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

<Textarea {...{
  id: "full-address",
  name: "address",
  label: {
    text: "Full address"
  },
  rows: 8
}} />

With label as page heading

Svelte code

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

<Textarea {...{
  id: "textarea-with-page-heading",
  name: "address",
  label: {
    text: "Full address",
    classes: "govuk-label--l",
    isPageHeading: true
  }
}} />

With optional formGroup classes

Svelte code

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

<Textarea {...{
  id: "textarea-with-page-heading",
  name: "address",
  label: {
    text: "Full address"
  },
  formGroup: {
    classes: "extra-class"
  }
}} />

With autocomplete attribute

Svelte code

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

<Textarea {...{
  id: "textarea-with-autocomplete-attribute",
  name: "address",
  label: {
    text: "Full address"
  },
  autocomplete: "street-address"
}} />

With spellcheck enabled

Svelte code

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

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

With spellcheck disabled

Svelte code

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

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