CharacterCount

Default

Svelte code

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

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

With custom textarea description

Svelte code

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

<CharacterCount {...{
  name: "custom-textarea-description",
  id: "custom-textarea-description",
  maxlength: 10,
  label: {
    text: "Can you provide more detail?"
  },
  textareaDescriptionText: "Gallwch ddefnyddio hyd at %{count} nod"
}} />

With hint

Svelte code

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

<CharacterCount {...{
  name: "with-hint",
  id: "with-hint",
  maxlength: 10,
  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 default value

Svelte code

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

<CharacterCount {...{
  id: "with-default-value",
  name: "default-value",
  maxlength: 100,
  label: {
    text: "Full address"
  },
  value: "221B Baker Street\nLondon\nNW1 6XE\n"
}} />

With default value exceeding limit

Svelte code

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

<CharacterCount {...{
  id: "exceeding-characters",
  name: "exceeding",
  maxlength: 10,
  value: "221B Baker Street\nLondon\nNW1 6XE\n",
  label: {
    text: "Full address"
  },
  errorMessage: {
    text: "Please do not exceed the maximum allowed limit"
  }
}} />

With custom rows

Svelte code

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

<CharacterCount {...{
  id: "custom-rows",
  name: "custom",
  maxlength: 10,
  label: {
    text: "Full address"
  },
  rows: 8
}} />

With label as page heading

Svelte code

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

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

With word count

Svelte code

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

<CharacterCount {...{
  id: "word-count",
  name: "word-count",
  maxwords: 10,
  label: {
    text: "Full address"
  }
}} />

With threshold

Svelte code

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

<CharacterCount {...{
  id: "with-threshold",
  name: "with-threshold",
  maxlength: 10,
  threshold: 75,
  label: {
    text: "Full address"
  }
}} />

With translations

Svelte code

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

<CharacterCount {...{
  id: "with-translations",
  name: "with-translations",
  maxlength: 10,
  label: {
    text: "Full address"
  },
  charactersUnderLimitText: {
    other: "%{count} characters to go",
    one: "One character to go"
  },
  charactersAtLimitText: "Zero characters left",
  charactersOverLimitText: {
    other: "%{count} characters too many",
    one: "One character too many"
  },
  wordsUnderLimitText: {
    other: "%{count} words to go",
    one: "One word to go"
  },
  wordsAtLimitText: "Zero words left",
  wordsOverLimitText: {
    other: "%{count} words too many",
    one: "One word too many"
  }
}} />