Word Count

Live count of words entered.

html

<div class="wcd" style="--accent:#A8E6C1;">
  <div class="wcd__field" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Message" aria-describedby="wcd-counter">Draft your announcement here and watch the counter update as you type.</div>
  <p id="wcd-counter" class="wcd__counter" role="status">
    <span class="wcd__count">12</span> / 40 words
    
  </p>
</div>
<style>
.wcd { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; max-width: 320px; border: 1.5px solid #24143020; border-radius: 10px; }
.wcd__field { min-height: 3.4em; font-size: 14px; line-height: 1.6; padding-bottom: 10px; border-bottom: 1px solid #24143014; margin-bottom: 8px; }
.wcd__field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wcd__counter { margin: 0; font-size: 12px; color: #241430aa; display: flex; align-items: center; gap: 8px; }
.wcd__count { font-weight: 700; color: var(--accent); }
.wcd__counter--warn { color: #b3431f; }
.wcd__counter--warn .wcd__count { color: #b3431f; }
.wcd__warn-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
</style>

tailwind

<div class="max-w-[320px] bg-[#FAF7F2] text-[#241430] font-sans p-4 border-[1.5px] border-[#24143020] rounded-[10px]" style="--accent:#A8E6C1;">
  <div class="min-h-[3.4em] text-sm leading-relaxed pb-2.5 border-b border-[#24143014] mb-2" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Message" aria-describedby="wcd-tw-counter">Draft your announcement here and watch the counter update as you type.</div>
  <p id="wcd-tw-counter" class="wcd-tw__counter m-0 text-xs text-[#241430]/65 flex items-center gap-2" role="status">
    <span class="font-bold" style="color:#A8E6C1">12</span> / 40 words
    
  </p>
</div>
<style>
.wcd-tw__counter--warn { color: #b3431f; }
</style>

react

export function WordCount({
  text = "Draft your announcement here and watch the counter update as you type.",
  wordCount = 12,
  limit = 40,
  nearLimit = false,
  countMode = "words",
  accent = "#A8E6C1",
}) {
  const warnColor = "#b3431f";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, maxWidth: 320, border: "1.5px solid #24143020", borderRadius: 10 }}>
      <div contentEditable suppressContentEditableWarning role="textbox" aria-multiline="true" aria-label="Message" aria-describedby="wcd-react-counter"
        style={{ minHeight: "3.4em", fontSize: 14, lineHeight: 1.6, paddingBottom: 10, borderBottom: "1px solid #24143014", marginBottom: 8 }}>
        {text}
      </div>
      <p id="wcd-react-counter" role="status" style={{ margin: 0, fontSize: 12, color: nearLimit ? warnColor : "#241430aa", display: "flex", alignItems: "center", gap: 8 }}>
        <span style={{ fontWeight: 700, color: nearLimit ? warnColor : accent }}>{wordCount}</span> / {limit} {countMode}
        {nearLimit && <span style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".03em" }}>Approaching limit</span>}
      </p>
    </div>
  );
}