Input

Ready

HTML
View
Context
Assets
Info
Notes


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


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


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


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


        <input
  id="{{input.for}}"
  name="{{input.for}}"
  type="text"
  class="inv-input {{ input.modifier }}"
  value="{{ input.value }}"
  placeholder="{{ ternary input.placeholder input.placeholder "Ex: 000-00-000" }}"
  {{ternary disabled "disabled" "" }}
/>


        
        
            /* Default: No context defined */


        
            /* Disabled */
{
  "disabled": true
}


        
            /* Error */
{
  "input": {
    "modifier": "inv-input--error"
  }
}


        
            /* Focused */
{
  "input": {
    "modifier": "inv-input--focused"
  }
}

File:

Content:


                                .inv-input {
  flex: 1 1 auto;
  background-color: var(--color-system--light);
  color: var(--color-system--dark);
  font-size: 14px;
  border-radius: 4px;
  min-height: 40px;
  border: none;
  outline: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 16px;
  padding-right: 16px;
  line-height: normal;
  transition: background-color 0.1s ease-in-out;
}

.inv-input::placeholder {
  color: var(--color-system--regular);
}

.inv-input:disabled {
  background-color: var(--color-default--white);
  cursor: not-allowed;
  color: var(--color-default--regular);
}

.inv-input:focus,
.inv-input--focused {
  background-color: var(--color-system--white);
  -webkit-appearance: none;
  -webkit-box-shadow: var(--shadow-border-2) var(--color-primary--regular) inset;
  box-shadow: var(--shadow-border-2) var(--color-primary--regular) inset;
}

.inv-input--error {
  background-color: var(--color-error--white);
}

.inv-input--error:focus {
  -webkit-appearance: none;
  -webkit-box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
  box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
}

URL: /components/raw/input/input.css
Filesystem Path: src/components/input/input.css
Size: 1.1 KB

Handle: @input
Variants (4): Default , Disabled , Error , Focused
Preview:
- With layout
- Component only
Filesystem Path: src/components/input/input.hbs
Referenced by (22): @dropdown, @dropdown--open, @dropdown--action, @dropdown--counter, @dropdown--select, @dropdown--multiselect, @form-field, @form-field--icon, @form-field--progress, @form-field--error, @form-field--disabled, @input-addon, @input-addon--disabled, @input-addon--icon, @input-map, @input-map--selected, @input-map--search-empty, @input-map--search-value, @input-map--search-disabled, @input-map--search-value-disabled, @input-map--search-empty-error, @input-map--search-value-error

Inputs

Campos de input da aplicação

Tendo a classe base .inv-input, podendo ser utilizado apenas com a tag input

Default Input

Input padrão, comum para ações regulares dos usuários.

<input type="text" class="inv-input" name="" placeholder="" value="" />

Modificadores	Uso
`.inv-input--error`	Modifica o input com estilização de erro
`.inv-input--focused`	Modifica o input com estilização de focus

Error Input

Versão de indicação de erro no input.

<input type="text" class="inv-input inv-input--error" name="" placeholder="" value="" />

Focused Input

Versão de indicação de focus no input.

<input type="text" class="inv-input inv-input--focused" name="" placeholder="" value="" />