Violin.css

Form Field: Error 

<div class="inv-form-field ">
    <label for="error" class="inv-label ">
        Input label
        <small>- obrigatório</small>
    </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>
 
<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>
 
{
  "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"
  }
}
  • Content: 
    .inv-form-field {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

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

.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: 461 Bytes

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>