Forms

<label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label>
<input type="text" placeholder="Enter your name" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent">

<label class="block text-sm font-medium text-gray-700 mb-1.5">Message</label>
<textarea rows="3" placeholder="Write your message..." class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent resize-none"></textarea>

<select class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent appearance-none">
  <option>Select your country</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="checkbox" class="w-4 h-4 text-alpine-500 border-gray-300 rounded focus:ring-alpine-500">
  <span class="text-sm text-gray-700">Email notifications</span>
</label>

<label class="flex items-center gap-2.5 cursor-pointer">
  <input type="radio" name="contact" class="w-4 h-4 text-alpine-500 border-gray-300 focus:ring-alpine-500">
  <span class="text-sm text-gray-700">Email</span>
</label>

<div class="flex items-center justify-between">
  <span class="text-sm text-gray-700">Email notifications</span>
  <div class="toggle-switch active" x-data="toggleSwitch" @click="toggle()" :class="{ active: on }"></div>
</div>
<div class="flex items-center justify-between">
  <span class="text-sm text-gray-700">SMS alerts</span>
  <div class="toggle-switch" x-data="toggleSwitch" @click="toggle()" :class="{ active: on }"></div>
</div>
<div class="flex items-center justify-between">
  <span class="text-sm text-gray-700">Dark mode</span>
  <div class="toggle-switch" x-data="toggleSwitch" @click="toggle()" :class="{ active: on }"></div>
</div>
<!-- CSS classes defined in styles.css:
     .toggle-switch { width: 44px; height: 24px; background: #cbd5e1; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.3s; }
     .toggle-switch.active { background: #3b82f6; }
     .toggle-switch::after { content: ''; width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s; }
     .toggle-switch.active::after { transform: translateX(20px); } -->

<label class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-600 hover:bg-gray-100 cursor-pointer transition-colors">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
  Choose file
  <input type="file" class="hidden">
</label>

<input type="color" value="#3b82f6" class="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5">

<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label>
    <input type="text" placeholder="Enter your name" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent">
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
    <input type="email" placeholder="[email protected]" class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent">
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1.5">Message</label>
    <textarea rows="3" placeholder="Write your message..." class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-alpine-500 focus:border-transparent resize-none"></textarea>
  </div>
  <label class="flex items-center gap-2.5 cursor-pointer">
    <input type="checkbox" class="w-4 h-4 text-alpine-500 border-gray-300 rounded focus:ring-alpine-500">
    <span class="text-sm text-gray-700">I agree to the terms and conditions</span>
  </label>
  <button class="bg-alpine-500 text-white px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-alpine-600 transition-colors">Submit</button>
</div>

<!-- Valid state -->
<div class="relative">
  <input type="text" value="[email protected]" class="w-full bg-gray-50 border border-green-400 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent pr-10">
  <svg class="w-5 h-5 text-green-500 absolute right-3 top-1/2 -translate-y-1/2" ...></svg>
</div>
<p class="text-xs text-green-600 mt-1">Email is valid</p>

<!-- Invalid state -->
<input type="text" value="invalid-email" class="w-full bg-gray-50 border border-red-400 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
<p class="text-xs text-red-500 mt-1">Please enter a valid email address</p>

<!-- Disabled state -->
<input type="text" value="Disabled field" disabled class="w-full bg-gray-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm text-gray-400 cursor-not-allowed">