Character Counter

Wrap an input or textarea to keep count

Bottom counter

Task

<tk-character-counter
  text="Updated model value"
  max-length="200"
  input-size="medium"
  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.
`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.