Entrada CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl, slots adicionais de prefixo e sufixo, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes de entrada capturam dados do usuário por meio de campos de texto, email, senha e outros tipos de entrada. O sistema de entrada Frutjam fornece controles de formulário HTML semânticos com estilo Tailwind CSS para vários tamanhos, cores e estados de validação. Projetadas para acessibilidade e comportamento responsivo, as entradas integram-se perfeitamente com bibliotecas e estruturas de validação de formulários.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| input | Base | Campo de entrada de texto estilizado |
| input-outline | Estilo | Preenchimento transparente com borda visível |
| input-soft | Estilo | Fundo colorido silenciado |
| input-ghost | Estilo | Nenhuma borda visível até o foco |
| input-dashed | Estilo | Estilo de borda tracejada |
| input-square | Estilo | Sem raio de borda |
| input-disabled | Modificador | Aparência desativada para elementos sem entrada |
| input-xs | Tamanho | Extra pequeno |
| input-sm | Tamanho | Pequeno |
| input-md | Tamanho | Médio (padrão) |
| input-lg | Tamanho | Grande |
| input-xl | Tamanho | Extra grande |
| input-2xl | Tamanho | 2× extra grande |
| input-primary | Cor | Borda da cor do tema principal |
| input-secondary | Cor | Borda colorida do tema secundário |
| input-accent | Cor | Borda de cor do tema de destaque |
| input-neutral | Cor | Borda de cor de tema neutro |
| input-info | Cor | Borda colorida semântica de informações |
| input-success | Cor | Borda de cor semântica de sucesso |
| input-warning | Cor | Borda de cor semântica de aviso |
| input-error | Cor | Erro na borda da cor semântica |
Uso Básico
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
Tamanhos de entrada
1 2 3 4 5 6 | <input type="text" class="input input-xs" placeholder="Xsmall"> <input type="text" class="input input-sm" placeholder="Small"> <input type="text" class="input input-md" placeholder="Medium"> <input type="text" class="input input-lg" placeholder="Large"> <input type="text" class="input input-xl" placeholder="Xlarge"> <input type="text" class="input input-2xl" placeholder="2XLarge"> |
Cores de entrada
1 2 3 4 5 6 7 8 9 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-primary" placeholder="Primary"> <input type="text" class="input input-secondary" placeholder="Secondary"> <input type="text" class="input input-accent" placeholder="Accent"> <input type="text" class="input input-neutral" placeholder="Neutral"> <input type="text" class="input input-info" placeholder="Info"> <input type="text" class="input input-success" placeholder="Success"> <input type="text" class="input input-warning" placeholder="Warning"> <input type="text" class="input input-error" placeholder="Error"> |
Estilos de entrada
1 2 3 4 5 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-outline" placeholder="Outline"> <input type="text" class="input input-soft" placeholder="Soft"> <input type="text" class="input input-dashed" placeholder="Dashed"> <input type="text" class="input input-ghost" placeholder="Ghost"> |
Quadrado de entrada
Use input-square para entradas de um único caractere de largura fixa, como campos OTP ou PIN.
1 2 3 4 | <input type="text" class="input input-square input-xs" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-sm" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-md" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-lg" maxlength="1" placeholder="0"> |
Entrada desabilitada
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
Entrada com rótulo
1 2 3 4 5 6 7 8 9 | <label> <span>Email address</span> <input type="email" class="input input-outline w-full" placeholder="you@example.com"> </label> <label> <span>Password</span> <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password"> </label> |
Usando Claude Code, Cursor ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Entrada e a estrutura sob demanda. Chega de aulas alucinadas.