Character count

<!-- live-example -->
<script>
  export default {
    inputId: 'form-input-with-character-count',
    countTextId: 'character-count-text',
    limit: 100,
    data() {
      return {
        value: '',
      }
    },
    methods: {
      remainingCountText(count) {
        return `${count} characters remaining.`;
      },
      overLimitText(count) {
        return `${count} characters over limit.`;
      },
    },
  };
</script>

<template>
  <gl-form-group label="Form input with character count" :label-for="$options.inputId">
    <gl-form-input
      v-model="value"
      :id="$options.inputId"
      :value="value"
      :aria-describedby="$options.countTextId"
    />
    <gl-form-character-count
      :value="value"
      :limit="$options.limit"
      :count-text-id="$options.countTextId"
    >
      <template #remaining-count-text="{ count }">{{ remainingCountText(count) }}</template>
      <template #over-limit-text="{ count }">{{ overLimitText(count) }}</template>
    </gl-form-character-count>
  </gl-form-group>
</template>