Input Component

A fully accessible text input component built with native HTML and Tailwind CSS. Capture user data with labels, helper text, error states, and icon support. Available in multiple sizes and color variants with prefix/suffix patterns for modern, theme-aware form designs.

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 type="text" placeholder="Enter your text here" class="input">

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

View Code

Input Sizes

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

View Code

Input Colors

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

View Code

Input Styles

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

View Code

Input Square

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

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

View Code

Disabled Input

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

View Code

Input with Label

Email address Password

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

View Code