Input & Textarea

<input type="text" class="input" placeholder="Type something..." />
<input type="email" class="input" placeholder="Email address" />
<input type="text" class="input" placeholder="Disabled" disabled />

Requires: ux.min.css

<input type="text" class="w-full h-[2.75rem] px-3 py-2 text-base rounded-field border border-base-300 bg-base-100 text-base-content outline-none focus:border-primary focus:ring-3 focus:ring-primary/15 transition-colors" placeholder="Type something..." />
<input type="email" class="w-full h-[2.75rem] px-3 py-2 text-base rounded-field border border-base-300 bg-base-100 text-base-content outline-none focus:border-primary focus:ring-3 focus:ring-primary/15 transition-colors" placeholder="Email address" />
<input type="text" class="w-full h-[2.75rem] px-3 py-2 text-base rounded-field border border-base-300 bg-base-200 text-base-content outline-none opacity-50 cursor-not-allowed" placeholder="Disabled" disabled />

Requires: tw.min.css

// No JavaScript required — use native <input> elements

<label class="input">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" class="grow" placeholder="Search..." />
</label>

<label class="input">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
  <input type="email" class="grow" placeholder="Email" />
</label>

Requires: ux.min.css

<label class="inline-flex items-center gap-2 w-full h-[2.75rem] px-3 rounded-field border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15 transition-colors">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" class="grow appearance-none outline-none border-none bg-transparent" placeholder="Search..." />
</label>

<label class="inline-flex items-center gap-2 w-full h-[2.75rem] px-3 rounded-field border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15 transition-colors">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
  <input type="email" class="grow appearance-none outline-none border-none bg-transparent" placeholder="Email" />
</label>

Requires: tw.min.css

// No JavaScript required — wrapper label auto-focuses input on click

<input type="text" class="input input-sm" placeholder="Small" />
<input type="text" class="input" placeholder="Default" />
<input type="text" class="input input-lg" placeholder="Large" />

Requires: ux.min.css

<input type="text" class="w-full h-9 px-2.5 py-1.5 text-sm rounded-field border border-base-300 bg-base-100 outline-none focus:border-primary" placeholder="Small" />
<input type="text" class="w-full h-[2.75rem] px-3 py-2 text-base rounded-field border border-base-300 bg-base-100 outline-none focus:border-primary" placeholder="Default" />
<input type="text" class="w-full h-[3.25rem] px-4 py-2.5 text-lg rounded-field border border-base-300 bg-base-100 outline-none focus:border-primary" placeholder="Large" />

Requires: tw.min.css

// No JavaScript required

<input type="text" class="input" placeholder="Default (bordered)" />
<input type="text" class="input input-filled" placeholder="Filled" />
<input type="text" class="input input-ghost" placeholder="Ghost" />
<input type="text" class="input input-underline" placeholder="Underline" />

Requires: ux.min.css

<input type="text" class="w-full h-[2.75rem] px-3 py-2 rounded-field border border-base-300 bg-base-100 outline-none focus:border-primary" placeholder="Default (bordered)" />
<input type="text" class="w-full h-[2.75rem] px-3 py-2 rounded-t-field border-transparent border-b-2 border-b-base-300 bg-base-200 outline-none focus:border-b-primary" placeholder="Filled" />
<input type="text" class="w-full h-[2.75rem] px-3 py-2 rounded-field border border-transparent bg-transparent outline-none focus:border-primary" placeholder="Ghost" />
<input type="text" class="w-full h-[2.75rem] py-2 border-transparent border-b border-b-base-300 bg-transparent rounded-none outline-none focus:border-b-primary focus:border-b-2" placeholder="Underline" />

Requires: tw.min.css

// No JavaScript required

<div class="input-group">
  <span class="input-label input-label-required">Email</span>
  <input type="email" class="input input-error" placeholder="Enter email" />
  <span class="input-error-text">Please enter a valid email</span>
</div>

<div class="input-group">
  <span class="input-label">Username</span>
  <input type="text" class="input input-success" value="johndoe" />
  <span class="input-helper">Username is available</span>
</div>

Requires: ux.min.css

<div class="flex flex-col w-full">
  <span class="block text-sm font-medium text-base-content/60 mb-1">Email <span class="text-error">*</span></span>
  <input type="email" class="w-full h-[2.75rem] px-3 py-2 rounded-field border border-error bg-base-100 outline-none focus:ring-3 focus:ring-error/15" placeholder="Enter email" />
  <span class="text-sm text-error mt-1">Please enter a valid email</span>
</div>

<div class="flex flex-col w-full">
  <span class="block text-sm font-medium text-base-content/60 mb-1">Username</span>
  <input type="text" class="w-full h-[2.75rem] px-3 py-2 rounded-field border border-success bg-base-100 outline-none focus:ring-3 focus:ring-success/15" value="johndoe" />
  <span class="text-sm text-base-content/50 mt-1">Username is available</span>
</div>

Requires: tw.min.css

// No JavaScript required — validation styling is pure CSS

<div class="input-floating">
  <input type="text" class="input" placeholder=" " />
  <span class="input-label">Full Name</span>
</div>

<div class="input-floating">
  <input type="email" class="input" placeholder=" " />
  <span class="input-label">Email Address</span>
</div>

<div class="input-floating">
  <input type="text" class="input input-filled" placeholder=" " />
  <span class="input-label">Filled Floating</span>
</div>

Requires: ux.min.css

<!-- Floating label uses :placeholder-shown and :focus sibling selectors -->
<div class="relative">
  <input type="text" class="peer w-full h-[2.75rem] pt-5 pb-1 px-3 rounded-field border border-base-300 bg-base-100 outline-none focus:border-primary" placeholder=" " />
  <span class="absolute left-3 top-1/2 -translate-y-1/2 text-base text-base-content/40 pointer-events-none transition-all peer-focus:top-0 peer-focus:text-xs peer-focus:text-primary peer-focus:bg-base-100 peer-focus:px-1 peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:bg-base-100 peer-[:not(:placeholder-shown)]:px-1">Full Name</span>
</div>

Requires: tw.min.css

// No JavaScript required — uses CSS :placeholder-shown selector
// Important: the input must have placeholder=" " (space) for the trick to work

<!-- Password with icon (like daisyUI) -->
<label class="input">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  <input type="password" class="grow" placeholder="Password" />
</label>

<!-- Password with validation -->
<label class="input">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  <input type="password" class="grow" required placeholder="Password" minlength="8"
    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
    title="Must be 8+ chars with number, lowercase & uppercase" />
</label>

<!-- Simple password -->
<input type="password" class="input" placeholder="Enter password" />

Requires: ux.min.css

<label class="inline-flex items-center gap-2 w-full h-11 px-3 rounded-field border border-base-300 bg-base-100 focus-within:border-primary focus-within:ring-3 focus-within:ring-primary/15">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-5 shrink-0 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
  <input type="password" class="grow appearance-none outline-none border-none bg-transparent" placeholder="Password" />
</label>

Requires: tw.min.css

// No JavaScript required for basic password input
// The password field is native HTML: <input type="password">
// For a show/hide toggle, you need minimal JS:
const btn = document.querySelector('.password-toggle');
btn?.addEventListener('click', () => {
  const input = btn.previousElementSibling;
  input.type = input.type === 'password' ? 'text' : 'password';
});

<textarea class="textarea" placeholder="Write your message..."></textarea>
<textarea class="textarea textarea-filled" placeholder="Filled variant"></textarea>
<textarea class="textarea" disabled placeholder="Disabled"></textarea>

Requires: ux.min.css

<textarea class="w-full min-h-24 p-3 text-base rounded-field border border-base-300 bg-base-100 text-base-content outline-none resize-y focus:border-primary focus:ring-3 focus:ring-primary/15" placeholder="Write your message..."></textarea>
<textarea class="w-full min-h-24 p-3 text-base rounded-t-field border-transparent border-b-2 border-b-base-300 bg-base-200 outline-none resize-y focus:border-b-primary" placeholder="Filled variant"></textarea>
<textarea class="w-full min-h-24 p-3 text-base rounded-field border border-base-300 bg-base-200 text-base-content outline-none opacity-50 cursor-not-allowed resize-none" disabled placeholder="Disabled"></textarea>

Requires: tw.min.css

// No JavaScript required — use native <textarea>

<textarea class="textarea textarea-sm" placeholder="Small"></textarea>
<textarea class="textarea" placeholder="Default"></textarea>
<textarea class="textarea textarea-lg" placeholder="Large"></textarea>

Requires: ux.min.css

<textarea class="w-full min-h-16 p-2 text-sm rounded-field border border-base-300 bg-base-100 outline-none resize-y focus:border-primary" placeholder="Small"></textarea>
<textarea class="w-full min-h-24 p-3 text-base rounded-field border border-base-300 bg-base-100 outline-none resize-y focus:border-primary" placeholder="Default"></textarea>
<textarea class="w-full min-h-40 p-4 text-lg rounded-field border border-base-300 bg-base-100 outline-none resize-y focus:border-primary" placeholder="Large"></textarea>

Requires: tw.min.css

// No JavaScript required