Forms

<div class="max-w-md space-y-4">
  <div>
    <label class="form-label">Default input</label>
    <input type="email" placeholder="[email protected]" class="form-control form-input" />
  </div>

  <div>
    <label class="form-label form-label-required">Required field</label>
    <input type="text" placeholder="This field is required" class="form-control form-input" />
    <p class="form-help">This is a help message.</p>
  </div>

  <div>
    <label class="form-label form-label-required">With validation error</label>
    <input type="email" value="not-an-email" class="form-control form-input form-input-error" />
    <p class="form-error">Please enter a valid email address.</p>
  </div>

  <div>
    <label class="form-label">Disabled</label>
    <input type="text" value="Read only" disabled class="form-control form-input" />
  </div>
</div>

<div class="max-w-xs">
  <label class="form-label">Frequency</label>
  <select class="form-control form-select">
    <option>Monthly</option>
    <option>Yearly</option>
  </select>
</div>

<div class="max-w-md">
  <label class="form-label">Message</label>
  <textarea rows="3" placeholder="Leave a message" class="form-control form-textarea"></textarea>
</div>

<div class="space-y-3">
  <div class="flex items-center gap-2">
    <input type="checkbox" checked class="form-choice form-checkbox" id="ck1" />
    <label for="ck1" class="text-sm text-gray-700">I agree to the terms</label>
  </div>

  <div class="flex items-center gap-4">
    <div class="flex items-center gap-2">
      <input type="radio" name="plan" checked class="form-choice form-radio" id="r1" />
      <label for="r1" class="text-sm text-gray-700">Monthly</label>
    </div>
    <div class="flex items-center gap-2">
      <input type="radio" name="plan" class="form-choice form-radio" id="r2" />
      <label for="r2" class="text-sm text-gray-700">Yearly</label>
    </div>
  </div>
</div>

<div class="max-w-sm space-y-4">
  <div>
    <label class="form-label">Upload file</label>
    <input type="file" class="form-file" />
  </div>
  <label class="form-file-dropzone">
    <div class="text-center">
      <p class="text-sm font-medium text-secondary-700">Drop files here</p>
      <p class="text-xs text-secondary-400">or click to browse</p>
    </div>
  </label>
</div>

<div class="space-y-3">
  <label class="form-toggle">
    <input type="checkbox" checked class="peer sr-only" />
    <div class="form-toggle-track form-toggle-track-sm"></div>
    <span class="ml-3 text-sm text-gray-700">Small</span>
  </label>

  <label class="form-toggle">
    <input type="checkbox" checked class="peer sr-only" />
    <div class="form-toggle-track"></div>
    <span class="ml-3 text-sm text-gray-700">Default (enabled)</span>
  </label>

  <label class="form-toggle">
    <input type="checkbox" class="peer sr-only" />
    <div class="form-toggle-track"></div>
    <span class="ml-3 text-sm text-gray-700">Default (off)</span>
  </label>

  <label class="form-toggle">
    <input type="checkbox" checked class="peer sr-only" />
    <div class="form-toggle-track form-toggle-track-lg"></div>
    <span class="ml-3 text-sm text-gray-700">Large</span>
  </label>
</div>

<div class="max-w-md">
  <div class="form-inline">
    <input type="email" placeholder="Search customers" class="form-control form-input has-addon-right" />
    <button class="btn-danger form-addon-right">Search</button>
  </div>
</div>

<div class="max-w-sm space-y-3">
  <div class="form-addon">
    <span class="form-addon-left">https://</span>
    <input type="text" placeholder="yoursite.com" class="form-control form-input has-addon-left" />
  </div>
  <div class="form-addon">
    <input type="text" placeholder="username" class="form-control form-input has-addon-right" />
    <span class="form-addon-right">@example.com</span>
  </div>
  <div class="form-addon">
    <span class="form-addon-left form-addon-disabled">USD</span>
    <input type="text" placeholder="0.00" class="form-control form-input has-addon-left" disabled />
  </div>
</div>