Wrap an input or textarea to keep count
<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>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>
| 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. |