---
title: "Input"
type: component
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-03-07
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/components/input
---

# Input Component

 Input components capture user data through text fields, email, password, and other input types. The Frutjam input system provides semantic HTML form controls with Tailwind CSS styling for multiple sizes, colors, and validation states. Designed for accessibility and responsive behavior, inputs integrate seamlessly with form validation libraries and frameworks.

| Class           | Type     | Description                                |
| --------------- | -------- | ------------------------------------------ |
| input           | Base     | Styled text input field                    |
| input-outline   | Style    | Transparent fill with a visible border     |
| input-soft      | Style    | Muted tinted background                    |
| input-ghost     | Style    | No visible border until focused            |
| input-dashed    | Style    | Dashed border style                        |
| input-square    | Style    | No border radius                           |
| input-disabled  | Modifier | Disabled appearance for non-input elements |
| input-xs        | Size     | Extra small                                |
| input-sm        | Size     | Small                                      |
| input-md        | Size     | Medium (default)                           |
| input-lg        | Size     | Large                                      |
| input-xl        | Size     | Extra large                                |
| input-2xl       | Size     | 2× extra large                             |
| input-primary   | Color    | Primary theme color border                 |
| input-secondary | Color    | Secondary theme color border               |
| input-accent    | Color    | Accent theme color border                  |
| input-neutral   | Color    | Neutral theme color border                 |
| input-info      | Color    | Info semantic color border                 |
| input-success   | Color    | Success semantic color border              |
| input-warning   | Color    | Warning semantic color border              |
| input-error     | Color    | Error semantic color border                |

## Basic Usage

## Input Sizes

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


## Input Colors

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


## Input Styles

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


## Input Square

Use `input-square` for fixed-width single-character inputs like OTP or PIN fields.

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


## Disabled Input

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


## Input with 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>
```