<div class="space-y-4 max-w-md">
  <div class="form-group">
    <label class="form-label">Default Input</label>
    <input type="text" class="form-input" placeholder="Enter text..." />
  </div>

  <div class="form-group">
    <label class="form-label">Required Field</label>
    <input type="email" class="form-input" placeholder="email@example.com" required />
    <span class="form-hint">We'll never share your email with anyone.</span>
  </div>

  <div class="form-group">
    <label class="form-label">Disabled Input</label>
    <input type="text" class="form-input" placeholder="Cannot edit" disabled />
  </div>

  <div class="form-group">
    <label class="form-label">Input with Error</label>
    <input type="text" class="form-input form-input-error" placeholder="Invalid input" />
    <span class="form-error">This field is required</span>
  </div>
</div>

<div class="max-w-md">
  <div class="form-group">
    <label class="form-label">Choose an option</label>
    <select class="form-select">
      <option>Select...</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

<div class="max-w-md">
  <div class="form-group">
    <label class="form-label">Message</label>
    <textarea class="form-textarea" rows="4" placeholder="Enter your message..."></textarea>
  </div>
</div>

<div class="max-w-md">
  <div class="form-group">
    <label class="form-label">Location Notes (Simple)</label>
    <div class="textarea-with-toolbar">
      <div class="textarea-toolbar">
        <button
          type="button"
          class="toolbar-btn tiny"
          on="click insertTextFormat('#location-notes-simple', '**', '**')"
          title="Bold"
        >
          <i class="icon bold w-3 h-3"></i>
        </button>
        <button
          type="button"
          class="toolbar-btn tiny"
          on="click insertTextFormat('#location-notes-simple', '_', '_')"
          title="Italic"
        >
          <i class="icon italic w-3 h-3"></i>
        </button>
        <button
          type="button"
          class="toolbar-btn tiny"
          on="click insertTextFormat('#location-notes-simple', '<u>', '</u>')"
          title="Underline"
        >
          <i class="icon underline w-3 h-3"></i>
        </button>
      </div>
      <textarea
        id="location-notes-simple"
        class="form-textarea"
        rows="5"
        placeholder="Enter location notes... (Use toolbar for formatting)"
      ></textarea>
    </div>
    <span class="form-hint">Markdown format: **bold**, _italic_</span>
  </div>
</div>

<div class="max-w-md">
  <div class="form-group">
    <label class="form-label">Location Notes</label>
    <div class="rich-text-editor">
      <div class="editor-toolbar">
        <button type="button" class="toolbar-btn" data-command="bold" title="Bold (Ctrl+B)">
          <i class="icon bold w-4 h-4"></i>
        </button>
        <button type="button" class="toolbar-btn" data-command="italic" title="Italic (Ctrl+I)">
          <i class="icon italic w-4 h-4"></i>
        </button>
        <button
          type="button"
          class="toolbar-btn"
          data-command="underline"
          title="Underline (Ctrl+U)"
        >
          <i class="icon underline w-4 h-4"></i>
        </button>
        <span class="toolbar-divider"></span>
        <button type="button" class="toolbar-btn" data-command="list-bullet" title="Bullet List">
          <i class="icon list w-4 h-4"></i>
        </button>
        <button type="button" class="toolbar-btn" data-command="list-number" title="Numbered List">
          <i class="icon list-ordered w-4 h-4"></i>
        </button>
      </div>
      <div
        class="editor-content"
        contenteditable="true"
        data-placeholder="Enter location notes..."
      ></div>
    </div>
    <span class="form-hint">Use the toolbar to format your notes</span>
  </div>
</div>

<div class="max-w-md">
  <div class="form-group">
    <label class="form-label">Location Notes (WYSIWYG)</label>
    <textarea
      id="wysiwyg-demo"
      class="form-textarea"
      rows="5"
      data-wysiwyg='{"placeholder":"Enter your location notes...","maxHeight":"7.5rem"}'
    ></textarea>
    <span class="form-hint">Lightweight WYSIWYG with keyboard shortcuts</span>
  </div>
</div>

<div class="space-y-3">
  <label class="form-checkbox">
    <input type="checkbox" class="form-checkbox-input" />
    <span class="form-checkbox-label">Remember me</span>
  </label>

  <label class="form-checkbox">
    <input type="checkbox" class="form-checkbox-input" checked />
    <span class="form-checkbox-label">Subscribe to newsletter</span>
  </label>

  <label class="form-checkbox">
    <input type="checkbox" class="form-checkbox-input" disabled />
    <span class="form-checkbox-label">Disabled option</span>
  </label>
</div>

<div class="space-y-3">
  <label class="form-radio">
    <input type="radio" name="plan" class="form-radio-input" />
    <span class="form-radio-label">Free Plan</span>
  </label>

  <label class="form-radio">
    <input type="radio" name="plan" class="form-radio-input" checked />
    <span class="form-radio-label">Pro Plan</span>
  </label>

  <label class="form-radio">
    <input type="radio" name="plan" class="form-radio-input" />
    <span class="form-radio-label">Enterprise Plan</span>
  </label>
</div>

<form class="card max-w-lg">
  <div class="card-header">
    <h3 class="card-title">Contact Form</h3>
  </div>
  <div class="card-body space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div class="form-group">
        <label class="form-label">First Name</label>
        <input type="text" class="form-input" placeholder="John" />
      </div>
      <div class="form-group">
        <label class="form-label">Last Name</label>
        <input type="text" class="form-input" placeholder="Doe" />
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">Email</label>
      <input type="email" class="form-input" placeholder="john@example.com" />
    </div>

    <div class="form-group">
      <label class="form-label">Subject</label>
      <select class="form-select">
        <option>General Inquiry</option>
        <option>Support</option>
        <option>Feedback</option>
      </select>
    </div>

    <div class="form-group">
      <label class="form-label">Message</label>
      <textarea class="form-textarea" rows="4"></textarea>
    </div>

    <label class="form-checkbox">
      <input type="checkbox" class="form-checkbox-input" />
      <span class="form-checkbox-label">Send me a copy</span>
    </label>
  </div>
  <div class="card-footer">
    <button type="submit" class="button primary">Submit</button>
    <button type="reset" class="button ghost">Reset</button>
  </div>
</form>