---
title: "Input"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Input with native HTML semantics. Labels, error states, icons, prefix/suffix, and multiple sizes for accessible, theme-aware form fields."
url: https://frutjam.com/pl/components/input
---

# Input Component

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                                                          |
| --------------- | ----------- | ------------------------------------------------------------- |
| input           | Opierać     | Stylizowane pole wprowadzania tekstu                          |
| input-outline   | Styl        | Przezroczyste wypełnienie z widoczną krawędzią                |
| input-soft      | Styl        | Stonowane przyciemnione tło                                   |
| input-ghost     | Styl        | Brak widocznej granicy, dopóki nie zostanie ustawiona ostrość |
| input-dashed    | Styl        | Styl przerywanej granicy                                      |
| input-square    | Styl        | Brak promienia granicznego                                    |
| input-disabled  | Modyfikator | Wyłączony wygląd elementów innych niż wejściowe               |
| input-xs        | Rozmiar     | Bardzo mały                                                   |
| input-sm        | Rozmiar     | Mały                                                          |
| input-md        | Rozmiar     | Średni (domyślny)                                             |
| input-lg        | Rozmiar     | Duży                                                          |
| input-xl        | Rozmiar     | Bardzo duży                                                   |
| input-2xl       | Rozmiar     | 2× bardzo duże                                                |
| input-primary   | Kolor       | Obramowanie koloru podstawowego motywu                        |
| input-secondary | Kolor       | Ramka koloru motywu dodatkowego                               |
| input-accent    | Kolor       | Obramowanie koloru motywu akcentującego                       |
| input-neutral   | Kolor       | Neutralna granica koloru motywu                               |
| input-info      | Kolor       | Informacje semantyczne obramowanie koloru                     |
| input-success   | Kolor       | Sukces semantycznej granicy koloru                            |
| input-warning   | Kolor       | Ostrzeżenie semantyczna granica koloru                        |
| input-error     | Kolor       | Błąd semantycznego obramowania koloru                         |

## Podstawowe użycie

## Rozmiary wejściowe

```html
<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
<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
<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
<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
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>
```

## Wejście z etykietą

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