Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de entrada

Última atualização:

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
inputBaseCampo de entrada de texto estilizado
input-outlineEstiloPreenchimento transparente com borda visível
input-softEstiloFundo colorido silenciado
input-ghostEstiloNenhuma borda visível até o foco
input-dashedEstiloEstilo de borda tracejada
input-squareEstiloSem raio de borda
input-disabledModificadorAparência desativada para elementos sem entrada
input-xsTamanhoExtra pequeno
input-smTamanhoPequeno
input-mdTamanhoMédio (padrão)
input-lgTamanhoGrande
input-xlTamanhoExtra grande
input-2xlTamanho2× extra grande
input-primaryCorBorda da cor do tema principal
input-secondaryCorBorda colorida do tema secundário
input-accentCorBorda de cor do tema de destaque
input-neutralCorBorda de cor de tema neutro
input-infoCorBorda colorida semântica de informações
input-successCorBorda de cor semântica de sucesso
input-warningCorBorda de cor semântica de aviso
input-errorCorErro 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

html 
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

html 
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

html 
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.

html 
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

html 
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

html 
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.

Experimente o Cherry MCP