JS Component

Text Limit [sw-textlimit]

Contador de caracteres para inputs e textareas — alerta visual ao aproximar do limite, formato personalizável via template.

1. Demo — Digite nos campos

Adicione sw-textlimit e sw-textlimit-max no campo. O contador — inserido automaticamente logo abaixo — fica laranja ao atingir 80% e vermelho ao limite (100%).

Título do post

Nome de usuário

Bio

Post social

2. Formatos do Contador

Use sw-textlimit-txt para personalizar o texto com as variáveis {count}, {max} e {remaining}.

Padrão: {count}/{max}

Restante: {remaining} restantes

Completo: {count} de {max} chars

Só contagem: {count}

3. Expansão Centralizada

Use sw-textlimit-align="center" para centralizar o contador (fazendo o texto expandir para os dois lados conforme cresce) ou sw-textlimit-center para centralizar tanto o campo quanto o contador.

Contador Centralizado: sw-textlimit-align="center"

Campo e Contador Centralizados: sw-textlimit-center

Referência de Atributos & Classes

Atributo / Classe	Padrão	Descrição
`sw-textlimit`	—	Ativa o contador automático no campo.
`sw-textlimit-max`	`150`	Limite máximo de caracteres — define o atributo `maxlength`.
`sw-textlimit-txt`	`{count}/{max}`	Template do contador com `{count}`, `{max}`, `{remaining}`.
`sw-textlimit-align`	`right`	Alinhamento do contador: `center` (expande das pontas), `left` ou `right`.
`sw-textlimit-center`	—	Centraliza tanto o conteúdo do campo quanto o contador abaixo.
`.sw-textlimit-cnt`	—	Elemento span inserido automaticamente após o campo.
`.is-center` / `.is-left`	—	Classes de alinhamento aplicadas ao contador span.
`.is-ale`	—	Aplicado ao contador quando restam ≤ 20% dos caracteres (laranja/aviso).
`.is-err`	—	Aplicado ao contador ao atingir/ultrapassar o limite máximo.