Files
oa/documentation/elements/forms/file/file-boxed-documentation.md
2025-05-24 01:49:48 +09:00

2.4 KiB

Boxed File

Vuero file inputs can have a boxed style. You just need to add the is-boxed class to your file input element to apply this style. Please refer to markup for more details about usage.

<template>
  <VField grouped>
    <VControl>
      <div class="file is-boxed">
        <label class="file-label">
          <input
            class="file-input"
            type="file"
            name="resume"
          >
          <span class="file-cta">
            <span class="file-icon">
              <i class="fas fa-cloud-upload-alt" />
            </span>
            <span class="file-label"> Choose a file </span>
          </span>
        </label>
      </div>
    </VControl>
  </VField>
</template>
Choose a file…
Choose a file…
Choose a file…