---
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/id/components/input
---

# Input Component

Komponen masukan menangkap data pengguna melalui kolom teks, email, kata sandi, dan jenis masukan lainnya. Sistem masukan Frutjam menyediakan kontrol formulir HTML semantik dengan gaya Tailwind CSS untuk berbagai ukuran, warna, dan status validasi. Dirancang untuk aksesibilitas dan perilaku responsif, masukan terintegrasi secara mulus dengan pustaka dan kerangka validasi formulir.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas           | Jenis    | Keterangan                                  |
| --------------- | -------- | ------------------------------------------- |
| input           | Basis    | Bidang masukan teks bergaya                 |
| input-outline   | Gaya     | Isian transparan dengan batas yang terlihat |
| input-soft      | Gaya     | Latar belakang berwarna teredam             |
| input-ghost     | Gaya     | Tidak ada batas yang terlihat sampai fokus  |
| input-dashed    | Gaya     | Gaya perbatasan putus-putus                 |
| input-square    | Gaya     | Tidak ada radius perbatasan                 |
| input-disabled  | Pengubah | Tampilan non-input untuk elemen non-input   |
| input-xs        | Ukuran   | Sangat kecil                                |
| input-sm        | Ukuran   | Kecil                                       |
| input-md        | Ukuran   | Sedang (standar)                            |
| input-lg        | Ukuran   | Besar                                       |
| input-xl        | Ukuran   | Ekstra besar                                |
| input-2xl       | Ukuran   | 2× ekstra besar                             |
| input-primary   | Warna    | Batas warna tema utama                      |
| input-secondary | Warna    | Batas warna tema sekunder                   |
| input-accent    | Warna    | Batas warna tema aksen                      |
| input-neutral   | Warna    | Batas warna tema netral                     |
| input-info      | Warna    | Batas warna semantik info                   |
| input-success   | Warna    | Perbatasan warna semantik sukses            |
| input-warning   | Warna    | Batas warna semantik peringatan             |
| input-error     | Warna    | Batas warna semantik salah                  |

## Penggunaan Dasar

## Ukuran Masukan

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

## Warna Masukan

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

## Gaya Masukan

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

## Kotak Masukan

Gunakan `input-square` untuk input karakter tunggal dengan lebar tetap seperti bidang OTP atau 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">
```

## Masukan Dinonaktifkan

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

## Masukan dengan Label

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