Character Count
Usage notes
Character counts indicate the remaining characters in a text field.
Default
Toggle markup
<input aria-label="input" is="coral-textfield" type="text">
<coral-charactercount></coral-charactercount>
With maxlength
Toggle markup
<input aria-label="input" is="coral-textfield" type="text">
<coral-charactercount maxlength="10"></coral-charactercount>
Max Length from target input
Toggle markup
<input aria-label="input" is="coral-textfield" maxlength="8" type="text">
<coral-charactercount></coral-charactercount>
Invalid
(max length set to 5, value initialized to 13 character string)
Toggle markup
<input aria-label="input" is="coral-textfield" value="tooLongString" type="text">
<coral-charactercount maxlength="5"></coral-charactercount>
Target to next input by "_next"
Toggle markup
<coral-charactercount target="_next"></coral-charactercount>
<input aria-label="input" id="nextInput" is="coral-textfield" type="text">
Target to input by id
Toggle markup
<coral-charactercount target="#input"></coral-charactercount>
<input aria-label="input" id="input" is="coral-textfield" type="text">
TextArea
Toggle markup
<textarea aria-label="input" is="coral-textarea"></textarea>
<coral-charactercount maxlength="10"></coral-charactercount>
From JavaScript
Toggle markup
<input id="inputJS" aria-label="input" is="coral-textfield" type="text">
<script>
var characterCount = document.createElement('coral-charactercount');
characterCount.setAttribute('maxlength', '5');
characterCount.setAttribute('target', '#inputJS');
document.getElementById('inputJS').parentNode.appendChild(characterCount);
</script><coral-charactercount maxlength="5" target="#inputJS"></coral-charactercount>