Text Field

Sobre

Campo de entrada de texto (single ou multi-linha) do design system, com validação de formulário, ícones de prefixo/sufixo e altura estável.

variant: primary (padrão, preenchido + borda + sombra), secondary (fundo elevado, sem sombra), flat (borda flat, sem sombra, ideal pra tela de auth), tonal (fundo surfaceSecondary, sem borda) ou embedded (transparente, sem borda/sombra — usado dentro de TextFieldGroup)
size: medium (padrão, 45px, texto 16; use em formulários, principalmente no celular) ou small (40px, texto 14; para áreas densas de desktop como sidebars e painéis, combinando com o KasyButton small). O placeholder sempre acompanha o tamanho do texto
contentType: text (padrão), email, password (adiciona botão de mostrar/ocultar) ou phone (teclado numérico + formatter de dígitos)
label / showRequiredIndicator: label do campo e asterisco vermelho opcional
description / errorText / isInvalid: texto de ajuda e estado de erro
prefix / suffix: widgets nas laterais (ícones, botões)
maxLength: mostra contador de caracteres
maxLines / minLines: campo de uma linha (padrão) ou multi-linha
enabled / readOnly / autofocus / obscureText: estados padrão
validator / onSaved / onChanged / onSubmitted: integração com formulário
focusBorder / forceFocusBorder: controla se a borda de foco (accent) aparece; forceFocusBorder pinta o campo como "ativo" sem ele realmente ter foco (usado por triggers compostos como DatePicker)

Altura de linha única fixa em 45px (singleLineHeight), igual ao KasyButton médio, pra manter consistência visual entre campos e botões.

Carregando o componente…

Atualizado em 03/11/2026