Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Eingabekomponente

Zuletzt aktualisiert:

Nur CSS-Tailwind-CSS-Eingabe mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen XS-XL, Präfix- und Suffix-Addon-Slots, Ghost-Stil. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Eingabekomponenten erfassen Benutzerdaten über Textfelder, E-Mail, Passwort und andere Eingabetypen. Das Frutjam-Eingabesystem bietet semantische HTML-Formularsteuerelemente mit Tailwind-CSS-Stil für mehrere Größen, Farben und Validierungszustände. Eingaben sind auf Barrierefreiheit und reaktionsfähiges Verhalten ausgelegt und lassen sich nahtlos in Formularvalidierungsbibliotheken und Frameworks integrieren.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
inputBaseEingabefeld für gestylten Text
input-outlineStilTransparente Füllung mit sichtbarem Rand
input-softStilGedämpfter getönter Hintergrund
input-ghostStilKein sichtbarer Rand bis zur Fokussierung
input-dashedStilGestrichelter Randstil
input-squareStilKein Randradius
input-disabledModifikatorDeaktivierte Darstellung für Nicht-Eingabeelemente
input-xsGrößeExtra klein
input-smGrößeKlein
input-mdGrößeMittel (Standard)
input-lgGrößeGroß
input-xlGrößeExtra groß
input-2xlGröße2× extra groß
input-primaryFarbeFarbrand des primären Themas
input-secondaryFarbeFarbrand des sekundären Themas
input-accentFarbeFarbumrandung des Akzentthemas
input-neutralFarbeNeutraler Themenfarbrand
input-infoFarbeInfo-semantischer Farbrand
input-successFarbeErfolgssemantischer Farbrand
input-warningFarbeWarnender semantischer Farbrand
input-errorFarbeFehler beim semantischen Farbrand

Grundlegende Verwendung

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

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

Eingabegrößen

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

Eingabefarben

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

Eingabestile

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

Eingabequadrat

Verwenden Sie input-square für Einzelzeicheneingaben mit fester Breite wie OTP- oder PIN-Felder.

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

Deaktivierter Eingang

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

Eingabe mit Label

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Eingang-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP