Input

Input is primary component for information input into our applications. It consists of several parts — Title, Value, Icon and Validation.

  • Input Title — represent the name of the input. The style of this element changes based on Input style (Default vs. Wide).
  • Input Content — wraps Value, Icon and adds underline under it
  • Input Value — contains the value inputed by members. It can also contain Vinted predefined placeholder.
  • Input Icon — is used to give more context to the input. It can also allow the interaction with it (i.e. x icon in search input will clear the input). Icon size is always medium.
  • Input Validation — Wraps Validation component. It provides additional information about the input (state, validation errors, etc).

Each input can be required and give Validation errors. Also, it has value underline, which is highlighted on focus.

</br>

Pseudo-code:


<input type="text" style="wide" theme="primary">
  <input-title>Credit Card</input-title>
  <input-content>
    <input-value placeholder="e.g. 1234 5678 9012 3456">9876 5432 1098 7654</input-value>
    <input-icon>
      <icon size="medium"/>
    </input-icon>
  </input-content>
  <input-validation>
    <validation>
      Validation Note/Error
    </validation>
  </input-validation>
</input>



Style

Narrow

Narrow style Input has less padding around it (similar to Cell)




Wide

Wide style Input has more padding around it (similar to Cell), different style of Title and Content containing Value, Icon and Note is shifted to the right side.




Wide Input is usually used on the wider screens. It fallbacks to regular inputs on small screens, see example bellow:

</br>
Tight

Tight style Input has no paddings around it (similar to Cell)




Tight Input is usually used for building complex cells which contain various other components.

Types

Textarea

Textarea type Input has several rows of text height, however, even more lines of text can be entered.

Component uses min_value and max_value to limit number of text Textarea Input.


Password

Password type Input hides value under rounded dots. It also contains might contain lock or eye icon.

Component uses min_value and max_value to limit number of text Password Input.

</br>
Date

Date type Input allows to specific date. It does contain arrow Icon. Currently, the date selection interface should be native depending on the platform.

This input can have both min_value and max_value.

</br>
Time

Time type Input allows to specific date. Currently, the time selection interface should be native depending on the platform.

This input can have both min_value and max_value.

</br>
Select

Select input offers several options to choose from with possible preselected option. It accepts options parameter as array and represents options using Menu component.

</br>

Validation

Validation message is displayed when input validation fails or there is contextual information to be shown (for example, information about email confirmation below email input field). When Input is in Cell, we use it instead of Cell.

When a validation error occurs, any existing validation note is replaced by validation with warning theme. In general, there can only be one validation message shown for each input.




<input type="text">
  <input-title>E-mail Address</input-title>
  <input-content>
    <input-value placeholder="e.g. xyz@vinted.com">john_doe@vinted.com</input-value>
  </input-content>
  <input-validation>
    <validation>
      Oh, your e-mail address isn’t confirmed.
      Please, make sure it’s valid and request a confirmation link.
    </validation>
  </input-validation>
</input>
<input type="text">
  <input-title>E-mail Address</input-title>
  <input-content>
    <input-value placeholder="e.g. xyz@vinted.com">johnny@vinted.com</input-value>
  </input-content>
  <input-validation>
    <validation theme="warning">
      Your new e-mail matches the old one!
    </validation>
  </input-validation>
</input>
<input type="text">
  <input-title>E-mail Address</input-title>
  <input-content>
    <input-value placeholder="e.g. xyz@vinted.com">jane_doe@vinted.com</input-value>
  </input-content>
  <input-validation>
    <validation theme="success">
      Your new email address seems OK.
    </validation>
  </input-validation>
</input>

Themes

Currently, only primary theme is available for inputs. When theme is applied, use inverse theme as default for validation component.


</br>
<input type="text" theme="primary">
  <input-title>E-mail Address</input-title>
  <input-content>
    <input-value placeholder="e.g. xyz@vinted.com">john_doe@vinted.com</input-value>
  </input-content>
  <input-validation>
    <validation theme="inverse">
      Oh, your e-mail address isn’t confirmed.
      Please, make sure it’s valid and request a confirmation link.
    </validation>
  </input-validation>
</input>

States

Disabled

Disabled state of Input doesn’t allow a possibility to make a change in value. It uses opacity as indicator of that.


</br>

Specifications

// Base

$input-background-color                       : palette(cg9);

$input-title-padding-bottom                   : unit(2);
$input-icon-padding-left                      : unit(2);
$input-validation-padding-top                 : unit(1);

$input-icon-size                              : 'medium';
$input-textarea-rows-number                   : 5;

$input-date-arrow-size                        : unit(3);

$input-value-padding                          : unit(1);
$input-value-border-thickness                 : unit(0.25);
$input-value-border-color                     : rgba(palette(cg1), 0.08);
$input-value-border                           : $input-value-border-thickness solid $input-value-border-color;

// Text

$input-value-text-type                        : 'user-input';
$input-title-text-type                        : 'subtitle';
$input-validation-text-type                   : 'caption';

$input-value-placeholder-theme                : 'muted';
$input-value-placeholder-opacity              : 0.48;

$input-primary-placeholder-theme              : 'inverse';

// Sizes

$input-padding                                : unit(4);
$input-narrow-padding                         : unit(2);
$input-wide-padding                           : unit(6);
$input-tight-padding                          : unit(0);

// Themes

$input-primary-background-color               : palette('cp1');
$input-primary-title-theme                    : 'inverse';
$input-primary-value-theme                    : 'inverse';
$input-primary-icon-color                     : palette(cg9);
$input-primary-value-border-color             : rgba(palette(cg9), 0.24);

// States

$input-disabled-opacity-unit                  : 0.48;

$input-focused-value-border-color             : rgba(palette(cp1), 0.48);
$input-inverse-focused-value-border-color     : rgba(palette(cg9), 0.64);

API

name type default
style default / wide / narrow / tight default
type text / textarea / date / time / select / password text
theme none / primary none
disabled false / true false
required false / true false
options array nil
value string nil
min_value array nil
max_value array nil
validation string ’’