Violin.css

# Form Field

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

        <input id="default" name="default" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

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

        </div>
    </div>

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

        <i class="material-icons inv-input-icon ">
          visibility
        </i>

        <input id="icon" name="icon" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

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

        </div>
    </div>

    <!-- Progress -->
    <div class="inv-form-field inv-form-field--icon inv-form-field--progress">
        <label for="progress" class="inv-label ">
          Input label
          <span></span>
        </label>

        <i class="material-icons inv-input-icon ">
          visibility
        </i>

        <input id="progress" name="progress" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

        <progress class="inv-input-progress inv-input-progress--invalid" max="100" value="15"></progress>

        <div class="inv-form-text inv-form-text--error">
            Cara, nunca vi uma senha menos segura.
        </div>
    </div>

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

        <input id="error" name="error" type="text" class="inv-input inv-input--error" value="" placeholder="Ex: 000-00-000" />

        <div class="inv-form-text inv-form-text--error">
            Cara, nunca vi uma senha menos segura.
        </div>
    </div>

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

        <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" disabled />

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

        </div>
    </div>

`
`

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

      {{#if input-icon.icon}}
        {{> @input-icon}}
      {{/if}}

      {{> @input}}

      {{#if input.progress}}
        {{> @input-progress--invalid}}
      {{/if}}

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

`
`

    /* Default */
    {
      "label": {
        "value": "Input label",
        "show": true,
        "for": "default"
      },
      "input": {
        "for": "default"
      }
    }

    /* Icon */
    {
      "label": {
        "value": "Input label",
        "show": true,
        "for": "icon"
      },
      "input-icon": {
        "icon": "visibility"
      },
      "formField": {
        "modifier": "inv-form-field--icon"
      },
      "input": {
        "for": "icon"
      }
    }

    /* Progress */
    {
      "label": {
        "value": "Input label",
        "show": true,
        "for": "progress"
      },
      "input-icon": {
        "icon": "visibility"
      },
      "formField": {
        "modifier": "inv-form-field--icon inv-form-field--progress"
      },
      "input": {
        "for": "progress",
        "progress": true
      },
      "form-text": {
        "value": "Cara, nunca vi uma senha menos segura.",
        "modifier": "inv-form-text--error"
      },
      "inputProgress": {
        "value": 15,
        "modifier": "inv-input-progress--invalid"
      }
    }

    /* Error */
    {
      "label": {
        "value": "Input label",
        "show": true,
        "posfix": "- obrigatório",
        "for": "error"
      },
      "input": {
        "modifier": "inv-input--error",
        "for": "error"
      },
      "form-text": {
        "value": "Cara, nunca vi uma senha menos segura.",
        "modifier": "inv-form-text--error"
      }
    }

    /* Disabled */
    {
      "label": {
        "value": "Input label",
        "show": true,
        "posfix": "- desabilitado",
        "modifier": "inv-label--disabled"
      },
      "disabled": true
    }

`
File:

- Content:
  `

      .inv-form-field {
        position: relative;
        display: flex;
        flex-direction: column;
      }

      .inv-form-field > .inv-label {
        margin-left: 1px;
        margin-bottom: 4px;
      }

      .inv-form-field > .inv-form-text {
        margin-top: 4px;
        margin-left: 1px;
      }

      .inv-form-field--icon > .inv-input-icon {
        position: absolute;
        top: 28px;
        right: 8px;
      }

      .inv-form-field--icon > .inv-input {
        padding-right: 40px;
      }

      .inv-form-field--progress > .inv-input-progress {
        margin-top: 4px;
      }

      .inv-form-field--progress > .inv-form-text {
        margin-top: 2px;
      }

  `
- URL: /components/raw/form-field/form-field.css
- Filesystem Path: src/components/form-field/form-field.css
- Size: 534 Bytes

- Handle: @form-field
- Variants (5): Default , Icon , Progress , Error , Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-field/form-field.hbs
- References (5): @label, @input-icon, @input, @input-progress--invalid, @form-text
- Referenced by (4): @menu-search-modal, @menu-search-modal--with-results, @menu-search-modal--without-result, @menu-search-modal--scroll

## Form Field

Utilizado para entrada de dados no sistema, possuindo:

- label
- icon (opcional)
- input
- form-text (opcional)

Tendo a classe base `.inv-form-field`, sendo utilizado por um elemento `div`

### Default Form Field

Campo de formulário padrão, comum para ações regulares dos usuários.

`

    <div class="inv-form-field">
      <label for="name" class="inv-label">
        Name
      </label>
      <input id="name" name="name" type="text" class="inv-input" placeholder="Ex: John Doe" />
    </div>

    <div class="inv-form-field">
      <label for="name" class="inv-label">
        Event
      </label>
      <i class="material-icons inv-input-icon">event</i>
      <input id="event" name="event" type="date" class="inv-input" placeholder="10/10/2010" />
    </div>

    <div class="inv-form-field">
      <label for="password" class="inv-label">
        Password <span>- required</span>
      </label>
      <input id="password" name="password" type="password" class="inv-input inv-input--error" placeholder="Your password" />
      <div class="inv-form-text inv-form-text--error">
        Wrong password!
      </div>
    </div>

    <div class="inv-form-field">
      <label class="inv-label inv-label--disabled">
        Name <span>- disabled</span>
      </label>
      <input type="text" class="inv-input" placeholder="Ex: John Doe" disabled />
    </div>

`

Modificadores | Uso
--- | ---
`.inv-form-field--icon` | Modifica o form field para ter suporte a icons de input
`.inv-form-field--progress` | Modifica o form field para ter suporte a barras de progresso de input

### Form Field with icon

Campo de formulário com icone de ação do input.

`

    <div class="inv-form-field inv-form-field--icon">
      <label for="icon" class="inv-label">
        Field with icon
      </label>

      <i class="material-icons inv-input-icon">
        visibility
      </i>

      <input id="icon" name="icon" type="text" class="inv-input" />
    </div>

`

### Form Field with progress

Campo de formulário com barra de progresso de ação do input.

`

    <div class="inv-form-field inv-form-field--icon inv-form-field--progress">
      <label for="progress" class="inv-label">
        Field with icon and progress bar
      </label>

      <i class="material-icons inv-input-icon ">
        visibility
      </i>

      <progress
        class="inv-input-progress inv-input-progress--invalid"
        max="100"
        value="15"
      ></progress>

      <input id="progress" name="progress" type="text" class="inv-input" />

      <div class="inv-form-text inv-form-text--error">
          Cara, nunca vi uma senha menos segura.
      </div>
    </div>

`