<div class="form-group">
  <label class="label error">
    Project name
    <i class="ph ph-user"></i>
    <input class="input" type="text" placeholder="Launch Plan">
  </label>
  <div class="input-info">
    <i class="ph ph-warning-circle"></i>
    Field cannot be empty
  </div>
</div>

<fieldset class="fieldset">
  <legend class="legend">Fieldset</legend>
  <label class="label success">
    Validated
    <input class="input" type="text" value="Release Plan">
  </label>
</fieldset>

<label class="file-upload">
  Upload file
  <input type="file">
</label>

<fieldset class="fieldset">
  <legend class="legend">Date & Time</legend>
  <div class="form-grid">
    <label class="label">
      Date
      <i class="ph ph-calendar-blank"></i>
      <input class="input input-date" type="date" value="2026-04-23" data-date-picker>
    </label>
    <label class="label">
      Time
      <i class="ph ph-clock"></i>
      <input class="input input-time" type="time" value="14:30" data-date-picker>
    </label>
    <label class="label">
      Date & time
      <i class="ph ph-calendar-dots"></i>
      <input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker>
    </label>
  </div>
</fieldset>

<div class="file-upload-panel">
  <form class="file-upload-form" enctype="multipart/form-data">
    <div class="file-upload-header">
      <div class="file-upload-heading">
        <h3 class="file-upload-title">Upload files</h3>
        <p class="file-upload-description">Attach documents, archives or images.</p>
      </div>
      <span class="badge badge-info">Max 12 MB</span>
    </div>

    <label class="file-upload-dropzone">
      <span class="file-upload-icon" aria-hidden="true">
        <i class="ph ph-cloud-arrow-up"></i>
      </span>
      <span class="file-upload-body">
        <span class="file-upload-primary">Choose files</span>
        <span class="file-upload-secondary">Images get thumbnails, other files show their type</span>
      </span>
      <input type="file" name="files" multiple data-file-upload-input>
    </label>

    <div class="file-upload-preview" data-file-upload-preview hidden></div>

    <div class="file-upload-actions">
      <button class="btn btn-secondary btn-small" type="reset">Reset</button>
      <button class="btn btn-accent btn-small" type="submit">Upload</button>
    </div>
  </form>
</div>