Violin.css

# Form Field File: Long File Name

Ready

- HTML
- View
- Context
- Info
- Notes

`

    <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>

`
`

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

      {{> @input-file}}

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

`
`

    {
      "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
      }
    }

`

- Handle: @form-field-file--long-file-name
- 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.