---
title: Multi-line character counter
summary: Add an optional live character counter to multi-line, length-limited textboxes.
status: draft
owner: SAIF Doc Gen
last_reviewed: 2026-08-17
library: SAIF.Presentation.Web.Controls.V2
reference_type: package
operation_id: OP-V2-017
trigger: "`Init`, `CreateChildControls`, and `RenderControl` for a `SAIFTextBox` instance."
---

# Multi-line character counter

Add an optional live character counter to multi-line, length-limited textboxes. `Init`, `CreateChildControls`, and `RenderControl` for a `SAIFTextBox` instance.

| Field | Value |
| --- | --- |
| **Operation ID** | OP-V2-017 |
| **Trigger** | `Init`, `CreateChildControls`, and `RenderControl` for a `SAIFTextBox` instance. |
| **Inputs** | `TextMode`, `MaxLength`, `ShowCharacterCounter`, `Visible`. |
| **Outputs** | The base textbox, optionally followed by a character-counter panel and a `SaifMaxLength` attribute. |
| **Primary components** | `SAIFTextBox` |
| **Entry point** | `SAIF.Presentation.Web.Controls.V2/SAIFTextBox.vb` |

## Steps

1. On `Init`, register `/Resources/Scripts/Controls/TextBox.js` unless already registered. ([BR-V2-095](../business-rules.md#br-v2-095-textboxjs-included-once-per-page))
2. On `CreateChildControls`, when `TextMode` is `MultiLine`, `MaxLength` is greater than zero and `ShowCharacterCounter` is true, add a `Panel` with ID `msg` and CSS class `saiftextlimitmsg` sized to the textbox width. ([BR-V2-096](../business-rules.md#br-v2-096-character-counter-requires-multi-line-positive-maxlength-and-opt-in))
3. On `RenderControl`, when invisible render nothing; when multi-line with a maximum length, emit the `SaifMaxLength` attribute, render the base textbox, then render the counter panel if the counter is enabled; otherwise render the base textbox only. ([BR-V2-097](../business-rules.md#br-v2-097-maximum-length-published-as-a-client-attribute), [BR-V2-098](../business-rules.md#br-v2-098-invisible-textbox-renders-nothing), [BR-V2-099](../business-rules.md#br-v2-099-counter-panel-renders-immediately-after-the-textbox))

## Process flow

The following diagram visualizes this operation's control flow.

```mermaid
flowchart TD
	Start([Init]) --> Script[Register TextBox.js]
	Script --> CCC[CreateChildControls]
	CCC --> Cond{MultiLine, MaxLength>0, ShowCharacterCounter?}
	Cond -->|Yes| Counter[Add msg counter panel]
	Cond -->|No| Skip[No counter panel]
	Counter --> Render([RenderControl]) 
	Skip --> Render
	Render --> Vis{Visible?}
	Vis -->|No| NoOut([No output])
	Vis -->|Yes| Emit[Emit SaifMaxLength, render base textbox + counter]
```

## Failure and edge-case behavior

- No exceptional failure handling beyond the branches described in **Steps** was found in the analysis findings.*

## Related documentation
- [Operations and processes](../operations-processes.md)
- [Business rules](../business-rules.md)

## Sources
- `SAIF.Presentation.Web.Controls.V2/SAIFTextBox.vb`