Character Counter

Wrap an input or textarea to keep count

Bottom counter

<tk-character-counter
  text="Updated model value"
  max-length="200"
  count-down="true"
  placement="bottom"
  warning-text="Try breaking down larger tasks and questions">
  <label class="form__label form__label--stacked">
    Task
    <textarea class="form-input form-input--textarea"></textarea>
  </label>
</tk-character-counter>

Description

Wrap any input or textarea that needs a way to count its characters with <tk-character-counter>.

The input or textarea must provide a way to pass out the value being entered into the field so that the counter component can update the counts it checks against.

Example in angular:

<tk-character-counter
  text='{myModel}'
  ...
>
  <textarea ngModel='myModel'></textarea>
</tk-character-counter>

Props

Property Required? Options Default Description
text yes The value of the input that will be calculated based on the characters.
max-length yes The maximum number of characters allowed.
hide-counter no true/false false Whether to hide/show the counter.
placement no bottom, top top Where should the output of the counter be.
counter-class no ‘textarea__count’ Extra classes to apply to the counter.
count-down no true/false false Should the counter count down or up?
counter-prefix no Characters left: What text should come before the number?
warning-text yes Extra text for warning about to hit limit.
warning-class no ‘textarea__count–error error-text’ Extra classes to apply to warning text.