Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de entrada

Última actualización:

Entrada CSS de Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tamaños xs-xl, ranuras para complementos de prefijo y sufijo, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de entrada capturan datos del usuario a través de campos de texto, correo electrónico, contraseña y otros tipos de entrada. El sistema de entrada Frutjam proporciona controles de formulario HTML semánticos con estilo CSS Tailwind para múltiples tamaños, colores y estados de validación. Diseñadas para ofrecer accesibilidad y comportamiento responsivo, las entradas se integran perfectamente con bibliotecas y marcos de validación de formularios.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
inputBaseCampo de entrada de texto con estilo
input-outlineEstiloRelleno transparente con borde visible.
input-softEstiloFondo teñido apagado
input-ghostEstiloNo hay borde visible hasta que se enfoca
input-dashedEstiloEstilo de borde discontinuo
input-squareEstiloSin radio de frontera
input-disabledModificadorApariencia deshabilitada para elementos que no son de entrada
input-xsTamañoextrapequeño
input-smTamañoPequeño
input-mdTamañoMedio (predeterminado)
input-lgTamañoGrande
input-xlTamañoExtra grande
input-2xlTamaño2× extra grande
input-primaryColorBorde de color del tema principal
input-secondaryColorBorde de color del tema secundario
input-accentColorBorde de color del tema de acento
input-neutralColorBorde de color de tema neutro
input-infoColorBorde de color semántico de información
input-successColorBorde de color semántico de éxito.
input-warningColorBorde de color semántico de advertencia
input-errorColorBorde de color semántico de error

Uso básico

<input type="text" placeholder="Enter your text here" class="input">

<input type="text" placeholder="Enter your text here" className="input">

Tamaños 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">

Colores 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">

Cuadrado de entrada

Utilice input-square para entradas de un solo carácter de ancho fijo, como campos OTP o 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 deshabilitada

html 
1
2
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>

Entrada con etiqueta

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 u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Aporte según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP