Violin.css

# Form Field File

Ready

- HTML
- View
- Context
- Info
- Notes

`

    <!-- Default -->
    <div class="inv-form-field ">
        <label for="default" class="inv-label ">
          Input File label
          <span></span>
        </label>

        <div class="inv-input-file ">
            <label for="input-file" class="inv-input-file__text ">
          <span>Enviar arquivo</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input" disabled>
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Active -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File label
          <span></span>
        </label>

        <div class="inv-input-file ">
            <label for="input-file" class="inv-input-file__text inv-input-file__text--active">
          <span>Enviar arquivo</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input" disabled>
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text ">

        </div>
    </div>

    <!-- File Name -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File label
          <span></span>
        </label>

        <div class="inv-input-file inv-input-file--selected">
            <label for="input-file" class="inv-input-file__text ">
          <span>file.txt</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input">
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Long File Name -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File label
          <span></span>
        </label>

        <div class="inv-input-file inv-input-file--selected">
            <label for="input-file" class="inv-input-file__text ">
          <span>esse arquivo tem um nome grande demais.pdf</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input">
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Disabled -->
    <div class="inv-form-field ">
        <label for="" class="inv-label inv-label--disabled">
          Input File label
          <span>- desabilitado</span>
        </label>

        <div class="inv-input-file inv-input-file--disabled">
            <label for="input-file" class="inv-input-file__text inv-input-file__text--disabled">
          <span>Enviar arquivo</span>
          <i class="material-icons inv-input-file-icon inv-input-file-icon--disabled">file_upload</i>
        </label>
            <input id="input-file" type="file" disabled/>
            <button class="inv-clear-input" disabled>
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Error -->
    <div class="inv-form-field ">
        <label for="error" class="inv-label ">
          Input File label
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-file inv-input-file--error">
            <label for="input-file" class="inv-input-file__text inv-input-file__text--error">
          <span>Enviar arquivo</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input" disabled>
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text inv-form-text--error">
            Nenhum arquivo selecionado
        </div>
    </div>

    <!-- Error Uploaded -->
    <div class="inv-form-field ">
        <label for="error" class="inv-label ">
          Input File label
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-file inv-input-file--selected inv-input-file--error">
            <label for="input-file" class="inv-input-file__text inv-input-file__text--error">
          <span>file.txt</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input">
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text inv-form-text--error">
            Mano, o arquivo selecionado é inválido
        </div>
    </div>

    <!-- Error Active -->
    <div class="inv-form-field ">
        <label for="error" class="inv-label ">
          Input File label
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-file inv-input-file--selected inv-input-file--error">
            <label for="input-file" class="inv-input-file__text inv-input-file__text--error inv-input-file__text--error-active">
          <span>file.txt</span>
          <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
            <input id="input-file" type="file" />
            <button class="inv-clear-input">
          <i class="material-icons">clear</i>
        </button>
        </div>

        <div class="inv-form-text inv-form-text--error">
            Mano, o arquivo selecionado é inválido
        </div>
    </div>

`
`

    <div class="inv-form-field {{ formField.modifier }}">
      {{#if label.show}}
        {{> @label}}
      {{/if}}

      {{> @input-file}}

      {{> @form-text}}
    </div>

`
`

    /* Default */
    {
      "label": {
        "value": "Input File label",
        "show": true,
        "for": "default"
      },
      "input-file": {
        "placeholder": "Enviar arquivo"
      },
      "clear-input": {
        "disabled": true
      },
      "input": {
        "for": "default"
      }
    }

    /* Active */
    {
      "label": {
        "value": "Input File label",
        "show": true
      },
      "input-file": {
        "placeholder": "Enviar arquivo",
        "text": {
          "modifier": "inv-input-file__text--active"
        }
      },
      "clear-input": {
        "disabled": true
      }
    }

    /* File Name */
    {
      "label": {
        "value": "Input File label",
        "show": true
      },
      "input-file": {
        "placeholder": "file.txt",
        "modifier": "inv-input-file--selected"
      },
      "clear-input": {
        "disabled": null
      }
    }

    /* Long File Name */
    {
      "label": {
        "value": "Input File label",
        "show": true
      },
      "input-file": {
        "placeholder": "esse arquivo tem um nome grande demais.pdf",
        "modifier": "inv-input-file--selected"
      },
      "clear-input": {
        "disabled": null
      }
    }

    /* Disabled */
    {
      "label": {
        "value": "Input File label",
        "show": true,
        "posfix": "- desabilitado",
        "modifier": "inv-label--disabled"
      },
      "input-file": {
        "placeholder": "Enviar arquivo",
        "modifier": "inv-input-file--disabled",
        "text": {
          "modifier": "inv-input-file__text--disabled"
        },
        "icon": {
          "modifier": "inv-input-file-icon--disabled"
        },
        "input": {
          "disabled": true
        }
      },
      "clear-input": {
        "disabled": true
      }
    }

    /* Error */
    {
      "label": {
        "value": "Input File label",
        "show": true,
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "placeholder": "Enviar arquivo",
        "modifier": "inv-input-file--error",
        "text": {
          "modifier": "inv-input-file__text--error"
        }
      },
      "clear-input": {
        "disabled": true
      },
      "form-text": {
        "value": "Nenhum arquivo selecionado",
        "modifier": "inv-form-text--error"
      }
    }

    /* Error Uploaded */
    {
      "label": {
        "value": "Input File label",
        "show": true,
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "placeholder": "file.txt",
        "modifier": "inv-input-file--selected inv-input-file--error",
        "text": {
          "modifier": "inv-input-file__text--error"
        }
      },
      "clear-input": {
        "disabled": null
      },
      "form-text": {
        "value": "Mano, o arquivo selecionado é inválido",
        "modifier": "inv-form-text--error"
      }
    }

    /* Error Active */
    {
      "label": {
        "value": "Input File label",
        "show": true,
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input-file": {
        "placeholder": "file.txt",
        "modifier": "inv-input-file--selected inv-input-file--error",
        "text": {
          "modifier": "inv-input-file__text--error inv-input-file__text--error-active"
        }
      },
      "clear-input": {
        "disabled": null
      },
      "form-text": {
        "value": "Mano, o arquivo selecionado é inválido",
        "modifier": "inv-form-text--error"
      }
    }

`

- Handle: @form-field-file
- Variants (8): Default , Active , File Name , Long File Name , Disabled , Error , Error Uploaded , Error Active
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-field-file/form-field-file.hbs
- References (3): @label, @input-file, @form-text

There are no notes for this item.