Character Counter

Wrap an input or textarea to keep count

Bottom counter

  text="Updated model value"
  warning-text="Try breaking down larger tasks and questions">
  <label class="form__label form__label--stacked">
    <textarea class="form-input form-input--textarea"></textarea>


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:

  <textarea ngModel='myModel'></textarea>


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.
input-size no xs, small, medium, large, fullwidth fullwidth The size of the container. When using with tk-input, give the input a size of fullwidth to make it take up the whole container.
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.