Input

<input>

Form controls for collecting user text. Includes label patterns, leading icons, and error/disabled states.

Overview

Preview

Username

Email

Password

Must be at least 8 characters.

API Key

Basic input

Preview

<input
  type="text"
  placeholder="Enter value..."
  class="block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none transition-all focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15"
/>

With label

Preview

Username

This will be your public display name.

<div class="space-y-1.5">
  <label for="username" class="block text-[10px] font-semibold uppercase tracking-widest text-zinc-500">
    Username
  </label>
  <input
    id="username"
    type="text"
    placeholder="john_doe"
    class="block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none transition-all focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15"
  />
  <p class="text-xs text-zinc-600">This will be your public display name.</p>
</div>

With leading icon

Preview

<div class="relative">
  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
    <svg class="h-4 w-4 text-zinc-500" ...></svg>
  </div>
  <input
    type="search"
    placeholder="Search components..."
    class="block w-full rounded-md border border-zinc-700 bg-zinc-900 py-2 pl-9 pr-3 text-sm text-zinc-100 placeholder-zinc-600 outline-none transition-all focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15"
  />
</div>

With trailing button

Preview

<div class="flex">
  <input
    type="url"
    placeholder="https://youtube.com/..."
    class="block w-full rounded-l-md rounded-r-none border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15"
  />
  <button class="shrink-0 rounded-l-none rounded-r-md bg-[#D40C37] px-4 py-2 text-sm font-medium text-white hover:bg-[#b50a2f]">
    Fetch
  </button>
</div>

Error state

Preview

Email

Please enter a valid email address.

<input
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  class="block w-full rounded-md border border-red-700/60 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 outline-none ring-2 ring-red-700/20"
/>
<p id="email-error" class="text-xs text-red-400">Please enter a valid email address.</p>

Disabled

Preview

API Key

Generated keys cannot be edited.

<input
  type="text"
  disabled
  value="sk-•••••••••••••••••"
  class="block w-full rounded-md border border-zinc-800 bg-zinc-900/40 px-3 py-2 text-sm text-zinc-600 outline-none cursor-not-allowed"
/>

Textarea

Preview

Description

<textarea
  rows="4"
  placeholder="Tell us about your project..."
  class="block w-full resize-none rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 outline-none transition-all focus:border-[#D40C37] focus:ring-2 focus:ring-[#D40C37]/15"
></textarea>

Accessibility notes

• Always use a <label> paired with the input via id/for — never skip the label
• Error state inputs must have aria-invalid="true" and aria-describedby pointing to the error message element
• disabled inputs are automatically excluded from tab order — no need for tabindex="-1"
• Placeholder text is not a substitute for a label; it disappears on focus