TextInput

Apresentação

O componente TextInput é responsável por criar campos de entrada de texto que permitem aos usuários inserir e editar texto. Ele suporta diferentes variantes, incluindo texto simples e texto com máscara, além de permitir a adição de elementos internos (ícones, botões, etc) à esquerda e à direita do campo.

Quando usar

• Para campos de texto simples
• Para campos com máscara (telefone, CPF, etc)
• Para campos de busca
• Para campos de senha
• Para campos de email
• Para campos numéricos
• Para campos de data
• Para campos de hora
• Para campos de moeda
• Para campos com validação

Forma básica de uso

import { TextInput } from 'eitri-luminus';

// TextInput básico
<TextInput placeholder="Digite seu texto" />

// TextInput com valor inicial
<TextInput 
  placeholder="Digite seu texto"
  defaultValue="Texto inicial"
/>

// TextInput com evento onChange
<TextInput 
  placeholder="Digite seu texto"
  onChange={(e) => console.log(e.target.value)}
/>

// TextInput com classes personalizadas
<TextInput 
  placeholder="Digite seu texto"
  className="input-primary"
/>

// TextInput desabilitado
<TextInput 
  placeholder="Digite seu texto"
  disabled
/>

// TextInput com valor controlado
const [value, setValue] = useState('');
<TextInput 
  placeholder="Digite seu texto"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

// TextInput com elementos internos
<TextInput 
  placeholder="Digite seu texto"
  insideLeft={<span>🔍</span>}
  insideRight={<button>Limpar</button>}
/>

// TextInput com máscara
<TextInput 
  placeholder="Digite seu telefone"
  mask="(99) 99999-9999"
  variant="mask"
/>

// TextInput com múltiplas máscaras
<TextInput 
  placeholder="Digite seu CPF ou CNPJ"
  mask={['999.999.999-99', '99.999.999/9999-99']}
  variant="mask"
/>

// TextInput com label
<div className="flex flex-col gap-2">
  <label htmlFor="nome">Nome</label>
  <TextInput 
    id="nome"
    placeholder="Digite seu nome"
  />
</div>

// TextInput com evento onSubmit (Enter)
<TextInput 
  placeholder="Digite e pressione Enter"
  onSubmit={() => {
    console.log('Enter pressionado!');
    // Sua lógica aqui
  }}
/>

// TextInput com onSubmit para busca
<TextInput 
  placeholder="Digite sua busca"
  insideLeft={<span>🔍</span>}
  onSubmit={() => {
    // Executar busca
    console.log('Executando busca...');
  }}
/>

// TextInput com submitOnFill (submete automaticamente quando maxLength é atingido)
<TextInput 
  placeholder="Digite 5 caracteres"
  maxLength={5}
  submitOnFill={true}
  onSubmit={(value) => {
    console.log(`Campo preenchido! Valor: "${value}"`);
  }}
/>

// TextInput com máscara e submitOnFill
<TextInput 
  placeholder="Digite seu CPF"
  mask="999.999.999-99"
  variant="mask"
  maxLength={14}
  submitOnFill={true}
  onSubmit={(value) => {
    console.log(`CPF preenchido! Valor: "${value}"`);
  }}
/>

// TextInput com nextInputId e previousInputId (navegação bidirecional)
<TextInput 
  placeholder="Digite seu nome"
  nextInputId="email-input"
  onSubmit={() => console.log('Nome preenchido!')}
/>
<TextInput 
  id="email-input"
  placeholder="Digite seu email"
  nextInputId="phone-input"
  previousInputId="name-input"
  onSubmit={() => console.log('Email preenchido!')}
/>
<TextInput 
  id="phone-input"
  placeholder="Digite seu telefone"
  previousInputId="email-input"
  onSubmit={() => console.log('Telefone preenchido!')}
/>

// TextInput com allowChangeFocus=false (bloqueia mudança de foco)
<TextInput 
  placeholder="Campo sem mudança de foco"
  nextInputId="next-field"
  allowChangeFocus={false}
  onSubmit={() => console.log('Enter pressionado, mas foco não mudou!')}
/>

Propriedades

Propriedade	Tipo	Descrição
placeholder	string	Texto exibido quando o campo está vazio
value	string	Valor atual (controlado)
defaultValue	string	Valor inicial
disabled	boolean	Desabilita o input
onChange	function	Função chamada quando o valor muda
className	string	Classes CSS adicionais
id	string	Identificador único do componente
name	string	Nome do campo no formulário
insideLeft	ReactNode	Elemento a ser exibido à esquerda
insideRight	ReactNode	Elemento a ser exibido à direita
onClear	function	Função chamada para limpar o campo
onSubmit	function	Função chamada quando a tecla Enter é pressionada ou quando submitOnFill é ativado. Recebe o valor do input como parâmetro opcional
submitOnFill	boolean	Chama onSubmit automaticamente quando maxLength é atingido (padrão: false)
nextInputId	string	ID do próximo elemento para receber foco quando Enter é pressionado
previousInputId	string	ID do elemento anterior para receber foco quando Backspace é pressionado em input vazio
allowChangeFocus	boolean	Permite mudança de foco para nextInputId ou previousInputId (padrão: true)
mask	string | string[]	Padrão de máscara ou array de padrões
variant	InputVariant	Variante do input (text ou mask)

Heranças

O componente TextInput herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'input' para estilização base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta estados controlados e não controlados
• Pode ser desabilitado
• Suporta eventos de mudança
• Pode ser estilizado com diferentes cores
• Mantém a acessibilidade por padrão
• Pode ser usado em formulários
• Suporta diferentes tamanhos
• Pode ser combinado com labels
• Suporta elementos internos
• Suporta máscaras de entrada
• Pode ser usado em layouts flexíveis
• Suporta evento onSubmit ao pressionar Enter
• Suporta submitOnFill para submissão automática quando maxLength é atingido
• Suporta nextInputId para navegação automática entre campos
• Suporta previousInputId para navegação reversa com Backspace
• Ideal para campos de busca e formulários
• Perfeito para campos com tamanho fixo (CPF, CEP, etc.)
• Excelente para formulários com múltiplos campos
• Navegação bidirecional completa (Enter para frente, Backspace para trás)