Input

This applies to regular input for type “text”. This is an HTML property and does not mean it applies only for text fields. Numbers and others fall into this also.

In the picture from left to right are:

Default state, Error state, Warning state, Disabled

Attaching a few examples of other types of inputs:

Select type:

Date type:

Upload type:

In the design the Active state is missing for some components. It is visible in the Date type and the Upload type. We are to apply it to them for now unless specified from design.

#wrap
display: flex;
width: 240px;
flex-direction: column;
align-items: flex-start;
gap: var(--Spacing-XS, 4px);

#label - wrap
display: flex;
height: 20px;
align-items: center;
gap: var(--Spacing-XS, 4px);
align-self: stretch;

#label - text
flex: 1 0 0;
color: var(--Black, #000);
font-feature-settings: 'salt' on;

/* text-xs/normal */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */

#input - default
display: flex;
height: var(--Elements-Field-Height, 38px);
padding: 0px var(--Spacing-MD, 16px);
align-items: center;
align-self: stretch;
border-radius: var(--Elements-Field-Roundness, 3px);
border: 1px solid var(--Gray-300, #ABAFB5);
background: var(--White, #FFF);
color: var(--Gray-700, #4B4D53);
font-feature-settings: 'salt' on;

/* text-sm/normal */
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */

#input - error
border-radius: var(--Elements-Field-Roundness, 3px);
border: 1px solid #DC2626;
background: #FEF2F2;
color: #7F1D1D;
#input - error - message
align-self: stretch;

#label - warning - icon
display: flex;
width: var(--Spacing-MD, 16px);
height: var(--Spacing-MD, 16px);
justify-content: center;
align-items: center;

#input - warning
border: 1px solid #FB923C;
background: #FFF7ED;
color: #7F1D1D;

#input - disabled
border: 1px solid var(--Gray-300, #ABAFB5);
background: var(--Gray-50, #F5F6F6);
color: var(--Gray-300, #ABAFB5);

#input with icon - icon
display: flex;
width: var(--Spacing-MD, 16px);
height: var(--Spacing-MD, 16px);
justify-content: center;
align-items: center;

#active state:
border-radius: var(--Elements-Field-Roundness, 3px);
border: var(--Elements-Field-Roundness, 3px) solid RainbowBorder;