Input

New

Structure

 

<div class="input">
 <label for="input-1">Label</label>
 <div class="input__body">
  <div class="input__body-main">
   <div class="input__icon-left" aria-hidden="true">
    <!-- TODO: change de icon if needed -->
    <span class="material-symbols-outlined" aria-hidden="true">circle</span>
   </div>
   <input type="text" id="input-1" name="input-1" placeholder="Place holder text" required>
   <div class="input__icon-right" aria-hidden="true">
    <!-- TODO: change de icon if needed -->
    <span class="material-symbols-outlined" aria-hidden="true">circle</span>
   </div>
  </div>
  <div class="input__body-aside">
   <!-- TODO: add final tooltip if needed -->
   <button class="input__tooltip" type="button" title="This is a temporary tooltip">
    <span class="material-symbols-outlined" aria-hidden="true">info</span>
   </button>
  </div>
 </div>
 <div class="input__help">Helpful text goes here</div>
</div>

The CSS was created using the "Block, Element, Modifier" (BEM) directive for creating classes.

- .input - The container of the group that contains input and its related elements.
- .input__body - The container that will receive the input field and its closest elements
- .input__icon-left - The icon container that will be on the left side of the input field.
- .input__icon-right- The icon container that will be on the right side of the input field.
- .input__help - Container for helpful information related to the input field.
- .input__tooltip - Container for the tooltip.


Depending on the context, some elements should be removed.

Guidelines

General rules

  • Set an id on each input, selector, or other element, and apply an identifier to the label using the "for" attribute.
  • If there is no icon on the sides, remove the entire container from the input__icon-left or input__icon-right class.
  • This component is a standalone one. If it is necessary to be combined with another component, this one needs to use another Javascript file to only use the rules applied to it.

Input field states

  • When state modifier classes are inserted, the element receives a corresponding attribute through Javascript. The same happens in reverse.
  • Prefer to manually change the field, inserting an attribute in the input element instead of including a modifier class, unless the initial stage of the element is already defined.
    • data-invalid="true" attribute triggers the 'invalid' state.
    • disabled attribute triggers the 'disabled' state.
    • required attribute triggers the 'required' state.

Features

  • The success icon is optional. The input field needs to have the 'js-input-show-success' class.
  • The icon for erasing the field, when it is invalid, is optional. The input field needs to have the 'js-input-show-eraser' class.

Layout Modifiers

Layout modifiers will change the layout structure of the whole block.

 

  • Expanded text area- .input--expand-text

State modifiers

Theme state modifiers are capable of changing the colors, icons and other visual representations of the element, they are:

 

  • Required - .input--invalid
  • Invalid - .input--invalid
  • Disabled- .input--disabled

Examples

Most used ones

This one shows the eraser icon

Helpful text goes here

This one shows the success icon

Helpful text goes here
Helpful text goes here
Helpful text goes here
Helpful text goes here
Helpful text goes here

Others