email-organizer/offline-docs/daisyui/input.md

daisyUI Documentation - Input Component

Text Input is a simple input field.

Classes and Usage

Core Classes:

• input - The main input element
• input-bordered - Bordered input style
• input-ghost - Ghost input style
• input-primary - Primary color input
• input-secondary - Secondary color input
• input-accent - Accent color input
• input-neutral - Neutral color input
• input-info - Info color input
• input-success - Success color input
• input-warning - Warning color input
• input-error - Error color input
• input-xs - Extra small size
• input-sm - Small size
• input-md - Medium size [Default]
• input-lg - Large size
• input-xl - Extra large size
• input-disabled - Disabled state
• input-readonly - Read-only state

Examples

Basic Input

<input type="text" class="input" placeholder="Type here" />

Input with Border Style

<input type="text" class="input input-bordered" placeholder="Type here" />

Input with Ghost Style

<input type="text" class="input input-ghost" placeholder="Type here" />

Input Sizes

<input type="text" class="input input-xs" placeholder="Extra small" />
<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="Extra large" />

Input Colors

<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 with Disabled State

<input type="text" class="input" placeholder="You can't touch this" disabled />

Input with Read-only State

<input type="text" class="input" value="This is read-only" readonly />

Features

• Simple text input styling
• Multiple size options (xs, sm, md, lg, xl)
• Multiple color variants
• Border and ghost styles
• Disabled and read-only states
• Responsive design

This component is useful for creating styled text inputs that blend seamlessly with the rest of your daisyUI interface.