Textarea with Character Counter

<label for="bio">Bio <span class="hint">(max 280 characters)</span></label>
<textarea
    id="bio"
    name="bio"
    rows="4"
    maxlength="280"
    aria-describedby="bio-count"></textarea>
<p id="bio-count" class="counter" aria-live="polite">
    <span id="bio-count-n">0</span> / 280
</p>

<script>
const ta = document.getElementById('bio');
const cn = document.getElementById('bio-count-n');
const update = () => { cn.textContent = ta.value.length; };
ta.addEventListener('input', update);
update();
</script>

<style>
.counter { font-size: 0.8rem; color: #6b7280; margin-top: 4px; }
textarea:invalid { border-color: #ef4444; }
</style>