Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Input Component

CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty wejściowe przechwytują dane użytkownika za pomocą pól tekstowych, adresu e-mail, hasła i innych typów danych wejściowych. System wejściowy Frutjam zapewnia semantyczne kontrolki formularzy HTML ze stylami CSS Tailwind dla wielu rozmiarów, kolorów i stanów sprawdzania poprawności. Zaprojektowane z myślą o dostępności i responsywności, dane wejściowe płynnie integrują się z bibliotekami i frameworkami sprawdzania poprawności formularzy.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
inputOpieraćStylizowane pole wprowadzania tekstu
input-outlineStylPrzezroczyste wypełnienie z widoczną krawędzią
input-softStylStonowane przyciemnione tło
input-ghostStylBrak widocznej granicy, dopóki nie zostanie ustawiona ostrość
input-dashedStylStyl przerywanej granicy
input-squareStylBrak promienia granicznego
input-disabledModyfikatorWyłączony wygląd elementów innych niż wejściowe
input-xsRozmiarBardzo mały
input-smRozmiarMały
input-mdRozmiarŚredni (domyślny)
input-lgRozmiarDuży
input-xlRozmiarBardzo duży
input-2xlRozmiar2× bardzo duże
input-primaryKolorObramowanie koloru podstawowego motywu
input-secondaryKolorRamka koloru motywu dodatkowego
input-accentKolorObramowanie koloru motywu akcentującego
input-neutralKolorNeutralna granica koloru motywu
input-infoKolorInformacje semantyczne obramowanie koloru
input-successKolorSukces semantycznej granicy koloru
input-warningKolorOstrzeżenie semantyczna granica koloru
input-errorKolorBłąd semantycznego obramowania koloru

Podstawowe użycie

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

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

Rozmiary wejściowe

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

Kolory wejściowe

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

Style wprowadzania

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

Kwadrat wejściowy

Użyj input-square dla jednoznakowych danych wejściowych o stałej szerokości, takich jak pola OTP lub 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">

Wyłączone wejście

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

Wejście z etykietą

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>