CmInput
Campo de texto com label flutuante e adornos.
Import
Caminho público recomendado para este componente.
import { CmButton, CmContainer, CmField, CmIcon, CmInput, CmInputGroup, CmStack } from "cosmemilton-ui";CmInput é o campo de texto base da biblioteca. Ele também aceita props nativas como type, name, value, defaultValue, onChange, placeholder, disabled e required.
Quando label é informado sem placeholder/helperText/error, o próprio label repousa no campo vazio e sem foco; ao focar ou preencher, ele flutua para o topo.
Use label, helperText, error e success direto no CmInput quando ele estiver sozinho.
Se estiver usando CmField ao redor do input, deixe label/description/error no CmField e passe o CmInput sem label.
numeric="integer" ou numeric="decimal" filtra a digitação para números; inputMode sozinho apenas sugere o teclado em mobile.
startIcon, endIcon, startButton e endButton adicionam elementos dentro do campo.
Prefixo e sufixo textuais, como R$, @ ou BRL, ficam no CmInputGroup, não no CmInput.
Label como placeholder
Com o campo vazio e sem foco, o label ocupa a posição de placeholder. Clique no primeiro campo para ver o label subir; campos com valor já nascem flutuando.
Login, senha e autofill
Use name e autoComplete normalmente. Se Chrome ou Edge preencherem depois do render, o CmInput mantém o label flutuando e preserva o fundo do tema.
Label e texto de ajuda
helperText aparece abaixo do campo. Como há uma instrução visível, o label já nasce flutuando.
Ícone e botão dentro do campo
Use startIcon/endIcon para elementos visuais e startButton/endButton quando o elemento precisa ser clicável.
Validação
error troca a cor do campo e mostra a mensagem. success marca o campo como válido.
Variações de estado
Props nativas continuam disponíveis. disabled, readOnly, required e density podem ser combinados sem wrappers extras.
Prefixo e sufixo
Quando o texto faz parte da entrada, use CmInputGroup envolvendo o CmInput.