# Character counter
## Availability
\[SINCE Orbeon Forms 4.10]
## What it does
The `fr:character-counter` component encapsulates an existing text control and adds a character counter next to it.
It supports the following controls:
* `xf:input`
* `xf:textarea`
* `xf:secret`
* `fr:tinymce`
## Basic usage
The component is generally activated using the `appearance` attribute:
```xml
Message
```
The component automatically encapsulates the specified control, here `xf:input`.
The component displays its counter in different ways:
* if no `max-length` validation is present on the bound node
* the counter value is the current number of characters
* a CSS class `fr-charcounter-current` is present on the counter
* if a `max-length` validation is present on the bound node
* if the current length is smaller than `max-length`
* the counter value is the number of remaining characters allowed
* a CSS class `fr-charcounter-remaining` is present on the counter
* if the current length is larger than `max-length`
* the counter value is the number of extra characters allowed
* a CSS class `fr-charcounter-over` is present on the counter
By default, `fr-charcounter-over` places a minus sign in front of the number of characters over the limit.
## Form Builder support
The CSS bindings allow Form Builder to propose the "Character Counter" appearance to the user automatically. See [How the new Form Builder Appearance Selector Works](https://blog.orbeon.com/2015/06/how-new-form-builder-appearance.html) for details.
## See also
* [How the new Form Builder Appearance Selector Works](https://blog.orbeon.com/2015/06/how-new-form-builder-appearance.html)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://doc.orbeon.com/form-runner/component/character-counter.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.