Form Text

Molecule

react storybookgithub readmenpm version

Source Code HTML / SASS

Vous trouverez ici les démos et le code source statiques du composant.

On expose les différentes déclinaisons du composant au format HTML et SASS.

Le composant React a été conçu sur la base de cette structure en y ajoutant les interactions que vous trouverez dans notre storybook.react storybook

Classic Input Text

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text" name="inputtextname" type="text" />
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text Success

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--valid">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text" name="inputtextname" type="text" />
                <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                    <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                </svg>
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text Error

Message d'erreur
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--error">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text" name="inputtextname" type="text" />
            </div><small class="af-form__message  af-form__message--error">
                <svg class="glyphicon glyphicon-exclamation-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M4.922 48.828q0-9.219 3.555-17.539t9.609-14.375 14.375-9.609 17.539-3.555 17.539 3.555 14.375 9.609 9.609 14.375 3.555 17.539-3.555 17.539-9.609 14.375-14.375 9.609-17.539 3.555-17.539-3.555-14.375-9.609-9.609-14.375-3.555-17.539zM38.75 29.219l4.531 23.594q0.313 1.563 1.68 2.695t2.93 1.133h4.219q1.563 0 2.93-1.133t1.68-2.695l4.531-23.594q0.313-1.563-0.625-2.695t-2.5-1.133h-16.172q-1.641 0-2.578 1.133t-0.625 2.695zM42.188 72.266h15.625v-7.813h-15.625v7.813z"></path>
                </svg><span class="af-form__error-text">Message d'erreur</span></small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text Warning

Message d'attention
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--warning">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text" name="inputtextname" type="text" />
            </div><small class="af-form__message  af-form__message--warning">
                <svg class="glyphicon glyphicon-warning-sign" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M1.215,89.434c0.63,1.586,1.807,2.378,3.532,2.378h90.506c1.727,0,2.903-0.827,3.532-2.482
	c0.63-1.655,0.455-3.228-0.524-4.72L53.357,10.749C52.425,9.163,51.306,8.312,50,8.195c-1.305-0.117-2.424,0.57-3.357,2.063
	L1.74,84.817C0.76,86.311,0.585,87.848,1.215,89.434z M10.721,83.551L50,19.735l39.279,63.816H10.721L10.721,83.551z M53.208,33.233
	l-0.903,30.986h-4.379l-0.902-30.986H53.208z M50.051,77.36c-2.191,0-3.736-1.738-3.736-3.994c0-2.319,1.61-3.995,3.865-3.995
	s3.736,1.676,3.736,3.995C53.916,75.622,52.435,77.36,50.051,77.36z"></path>
                </svg><span class="af-form__error-text">Message d'attention</span></small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text Disabled

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--disabled">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text" name="inputtextname" type="text" disabled="disabled" />
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text with Clear

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--hasinfobulle">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                <div class="af-form__clear" role="button" tabindex="-1">
                    <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
                    </svg>
                </div>
                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text with Clear Error

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--error  af-form__text--hasinfobulle">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                <div class="af-form__clear" role="button" tabindex="-1">
                    <svg class="glyphicon glyphicon-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M90.086 0.888l-40.086 40.086-40.086-40.086-9.026 9.026 40.086 40.086-40.086 40.086 9.026 9.026 40.086-40.086 40.086 40.086 9.026-9.026-40.086-40.086 40.086-40.086z"></path>
                    </svg>
                </div>
                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
            </div><small class="af-form__message  af-form__message--error">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text with Info Bulle

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--hasinfobulle">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text with Info Bulle Success

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--valid  af-form__text--hasinfobulle">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
                <svg class="glyphicon glyphicon-ok" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 100">
                    <path d="M0.854 57.792l34.917 35 68.167-68.333-17.667-17.667-50.583 50.583-17.167-17.25z"></path>
                </svg>
            </div><small class="af-form__message">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

Input Text with Info Bulle Error

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="inputtext1">Input text *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__text  af-form__text--error  af-form__text--hasinfobulle">
            <div class="af-form__text-wrapper">
                <input class="af-form__input-text  af-form__input-text--hasinfobulle" name="inputtextname" type="text" />
                <button class="btn af-btn--circle-small" type="button"><span class="af-more-help">i</span></button>
            </div><small class="af-form__message  af-form__message--error">Aide à la saisie</small>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__text {
        &--disabled {
            .af-form__input-text {
                cursor: not-allowed;
            }
        }

        &--success,
        &--valid {
            .af-form__input-text {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
                position: relative;
                top: 5px;
            }

            >.af-btn--circle {
                margin-right: 1rem;
            }
        }

        &--valid {
            &::after {
                display: none;
            }

            .glyphicon-ok {
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &--error {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-red-axa;
                color: $color-red-axa;
            }
        }

        &--warning {
            padding: 0;

            .af-form__input-text {
                border: 1px solid $color-orange-dark;
                color: $color-orange-dark;
            }
        }

        &-wrapper {
            position: relative;
            display: inline-flex;
        }
    }

    &__input-text {
        border: 1px solid $color-silver;
        padding: 0.625rem 1.25rem;
        font-size: 1em;
        line-height: 20px;

        &:focus {
            border-color: $color-axa;
            color: $color-axa;
        }

        &--hasinfobulle {
            margin-right: 1rem;
        }
    }

    &__input-text::-ms-clear,
    &__input-text::-ms-reveal {
        display: none;
    }

    &__help {
        position: absolute;
        display: block;
        bottom: -20px;
        color: $color-gray;
        font-size: 0.8125em;
    }

    &__clear {
        position: absolute;
        right: 3rem;
        top: 0.75rem;

        &:hover {
            background: $color-mercury;
            border-radius: 100%;
            box-shadow: 0 0 0 6px $color-mercury;
        }

        .glyphicon {
            width: 19px;
            height: 100%;
            padding-top: 0;
            display: inherit;
        }
    }
}

React interactions

Vous trouverez ici les démos Storybook pour visualiser les interactions du composant.

Vous avez la possibilité de jouer avec les propriétés du composant React sur notre storybook.react storybook

Generales Guidelines

Les guidelines permettent de décrire l'ensemble des règles et des éléments graaphiques pour la conception des interfaces.

Elle sont destinées à être respectées par tous les intervenants d'un projet (UX, Développeurs, PO, etc ...), il s'agit donc d'un référentiel commun.

Style

Un style a été défini pour chaque composant, il possible d'importer uniquement le style du composant sur le projet fin optimiser le bundle.

On liste également les codes couleur utilisés, cliquez-ici pour voir l'ensemble des couleurs du Design System

Imports SASS

@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss';

Typography

Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.

Class Font-size (px/rem) Font-weight Font-family
.af-form-text 16 / 1 400 Source Sans Pro Regular

Colors

BLEU AXA#00008f$color-axa
BLEU Action#3032c1$color-azur
BLEU Action focus#aaabf9$color-azur-focused
Mercury#e5e5e5$color-mercury
Silver#cccccc $color-silver
Policy Privacy © 2020 AXA All Rights Reserved