Skip to content

Input

Series of classes that are use to style a different html input controls, expect radio and checkbox. They improve overall look and feel of html controls.

Structurally .input element contains the .control__content element.

HTML
<div class="control">
    <div class="control__label">
        <label for="username">
            Username
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                <input 
                    id="username" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">

                <span class="input__unit">$</span>

                <svg class="icon input__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
                </svg>
            </label>
        </div>
    </div>
</div>

Input without label

HTML
<div class="control">
    <div class="control__label">
        <label for="input-without-label">
            Input without label
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                <input 
                    id="input-without-label" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">
            </label>
        </div>
    </div>
</div>

Input with unit

HTML
<div class="control">
    <div class="control__label">
        <label for="input-with-unit">
            Input with unit
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                <input 
                    id="input-with-unit" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">

                <span class="input__unit">$</span>
            </label>
        </div>
    </div>
</div>

Input with icon

HTML
<div class="control">
    <div class="control__label">
        <label for="input-with-icon">
            Input with icon
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                <input 
                    id="input-with-icon" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">

                <svg class="icon input__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
                </svg>
            </label>
        </div>
    </div>
</div>

Input with unit and icon

HTML
<div class="control">
    <div class="control__label">
        <label for="input-with-unit-and-icon">
            Input with unit and icon
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input">
                <input 
                    id="input-with-unit-and-icon" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">

                <span class="input__unit">$</span>

                <svg class="icon input__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
                </svg>
            </label>
        </div>
    </div>
</div>

Input with errors

  • Error message
HTML
<div class="control">
    <div class="control__label">
        <label for="input-with-errors">
            Input with errors
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input input_error">
                <input 
                    id="input-with-errors" 
                    type="text" 
                    class="input__control" 
                    placeholder="Placeholder">
            </label>
        </div>
    </div>

    <div class="control__errors">
        <ul>
            <li>Error message</li>
        </ul>
    </div>
</div>

Input disabled

HTML
<div class="control">
    <div class="control__label">
        <label for="input-disabled">
            Input disabled
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input input_disabled">
                <input 
                    id="input-disabled" 
                    type="text" 
                    class="input__control" 
                    disabled
                    placeholder="Placeholder">
            </label>
        </div>
    </div>
</div>

Input with button

HTML
<div class="control">
    <div class="control__content">
        <div class="control__element">
            <label class="input input_with-button">
                <input 
                    type="text" 
                    class="input__control" 
                    placeholder="Search...">

                <button class="btn-icon btn-icon_s btn-icon_primary">
                    <svg class="icon btn-icon__icon">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
                    </svg>
                </button>
            </label>
        </div>
    </div>
</div>

Input size s

HTML
<div class="control">
    <div class="control__label">
        <label for="input-size-s">
            Input size s
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input input_s">
                <input 
                    type="text" 
                    id="input-size-s"
                    name="input-size-s"
                    class="input__control">

                <span class="input__unit">unit</span>

                <svg class="icon input__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
                </svg>
            </label>
        </div>
    </div>
</div>

Input size l

HTML
<div class="control">
    <div class="control__label">
        <label for="input-size-l">
            Input size l
        </label>
    </div>

    <div class="control__content">
        <div class="control__element">
            <label class="input input_l">
                <input 
                    type="text" 
                    id="input-size-l"
                    name="input-size-l"
                    class="input__control">

                <span class="input__unit">unit</span>

                <svg class="icon input__icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
                </svg>
            </label>1
        </div>
    </div>
</div>

LESS

You can modify any inputs less variable in your User Less section to change inputs styles.

inputs variables

Variables used to style inputs.

@inputTransition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
@inputWrapperGutter: @globalSpacing * 0.5;

@inputBorderWidth: 1px;
@inputBorderStyle: solid;
@inputBorderColor: @controlBorderColor;
@inputBorderRadius: @controlBorderRadius;
@inputBorderColorHover: @neutralColors800;
@inputBorderColorFocus: @primaryColors500;
@inputBackgroundColor: @controlBgcolor;

@inputBoxShadowColorFocus: @primaryColors300;
@inputBoxShadowFocus: 0 0 0 2px @inputBoxShadowColorFocus;

@inputFontSizeInPxS: @fontSizeInPxS;
@inputLineHeightInPxS: @lineHeightInPxS;

@inputPaddingTopL: 13;
@inputPaddingRightL: 12;
@inputPaddingBottomL: 13;
@inputPaddingLeftL: 12;

@inputPaddingTopM: 9;
@inputPaddingRightM: 12;
@inputPaddingBottomM: 9;
@inputPaddingLeftM: 12;

@inputPaddingTopS: 7;
@inputPaddingRightS: 12;
@inputPaddingBottomS: 7;
@inputPaddingLeftS: 12;

@inputWidthXs: 32;
@inputPaddingTopXs: 0;
@inputPaddingRightXs: 0;
@inputPaddingBottomXs: 0;
@inputPaddingLeftXs: 0;
@inputFontSizeXs: @fontSizeInPxXS;
@inputLineHeightXs: @lineHeightInPxS;

@inputPaddingTopWithButton: 4;
@inputPaddingRightWithButton: 4;
@inputPaddingBottomWithButton: 4;
@inputPaddingLeftWithButton: @inputPaddingRightM;

@inputBorderColorDisabled: @neutralColors100;
@inputBackgroundColorDisabled: @neutralColors100;
@inputColorDisabled: @neutralColors500;

@inputBorderColorError: @errorColors500;
@inputBoxShadowError: inset 0 0 0px 1px @inputBorderColorError;
@inputColorError: @errorColors500;

@inputIconColor: @neutralColors800;
@inputIconFontSizeInPxS: @inputFontSizeInPxS;
@inputIconLineHeightInPxS: @inputLineHeightInPxS;

@inputCopyBtnBorder: none;
@inputCopyBtnTextDecoration: none;
@inputCopyBtnColor: @primaryColor;
@inputCopyBtnFontWeight: @fontWeightSemibold;

If you want to change inputs styles, you can just change the variables. To change default border-radius just modify @inputsBorderRadius variable.

@inputBorderRadius: 110px;

inputs styles

Standard inputs styles.

.input {
    transition: @inputTransition;

    display: flex;
    width: 100%;
    align-items: center;

    border: @inputBorderWidth @inputBorderStyle @inputBorderColor;
    border-radius: ~'@{inputBorderRadius}px';
    column-gap: @inputWrapperGutter;
    color: @globalFontColor;
    -webkit-text-fill-color: @globalFontColor;
    background-color: @inputBackgroundColor;

    .padding-to-unit(@inputPaddingTopM, @inputPaddingRightM, @inputPaddingBottomM, @inputPaddingLeftM);
    .font-size(@inputFontSizeInPxS);
    .line-height(@inputLineHeightInPxS);

    &:hover {
        border-color: @inputBorderColorHover;
    }

    &:focus-within {
        box-shadow: @inputBoxShadowFocus;
        border-color: @inputBorderColorFocus;
    }

    &__icon {
        .font-size(@inputIconFontSizeInPxS);
        .line-height(@inputIconLineHeightInPxS);

        stroke: @inputIconColor;
    }

    &__control, input {
        width: 100%;

        outline: 0;

        background-color: @inputBackgroundColor;

        .font-size(@inputFontSizeInPxS);
        .line-height(@inputLineHeightInPxS);
    }

    &_l {
        .padding-to-unit(@inputPaddingTopL, @inputPaddingRightL, @inputPaddingBottomL, @inputPaddingLeftL);
    }

    &_s {
        .padding-to-unit(@inputPaddingTopS, @inputPaddingRightS, @inputPaddingBottomS, @inputPaddingLeftS);
    }

    &_xs {
        .pixel-to-rem(width, @inputWidthXs);
        .padding-to-unit(@inputPaddingTopXs, @inputPaddingRightXs, @inputPaddingBottomXs, @inputPaddingLeftXs);
        .pixel-to-rem(font-size, @inputFontSizeXs);
        .pixel-to-rem(line-height, @inputLineHeightXs);
    }

    &_text-center {
        text-align: center;
    }

    &_no-arrows[type='number'] {
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        -moz-appearance: textfield;
    }

    &_with-button {
        .padding-top-to-unit(@inputPaddingTopWithButton);
        .padding-bottom-to-unit(@inputPaddingBottomWithButton);
        .padding-right-to-unit(@inputPaddingRightWithButton);
    }

    &_disabled {
        border-color: @inputBorderColorDisabled;
        background-color: @inputBackgroundColorDisabled;
        color: @inputColorDisabled;

        pointer-events: none;

        .input {
            &__control {
                background-color: @inputBackgroundColorDisabled;
                color: @inputColorDisabled;

                input {
                    background-color: @inputBackgroundColorDisabled;
                }
            }

            &__icon {
                stroke: @inputColorDisabled;
            }
        }
    }

    &_error {
        border-color: @inputBorderColorError;
        box-shadow: @inputBoxShadowError;

        .control__input {
            color: @inputColorError;
        }
    }

    &__copy-btn {
        cursor: pointer;
        border: @inputCopyBtnBorder;
        text-decoration: @inputCopyBtnTextDecoration;
        color: @inputCopyBtnColor;
        font-weight: @inputCopyBtnFontWeight;
    }
}