Violin.css

Form Field 

<!-- Default -->
<div class="inv-form-field ">
    <label for="default" class="inv-label ">
        Input label
        <small></small>
    </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
        <small></small>
    </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
        <small></small>
    </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
        <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>


<!-- Disabled -->
<div class="inv-form-field ">
    <label for="" class="inv-label inv-label--disabled">
        Input label
        <small>- desabilitado</small>
    </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
}
  • 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>