Form Select

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 Select

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Input Select *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__select">
            <div class="af-form__select-container">
                <select class="af-form__input-select" name="inputtextname" type="text">
                    <option value="0">-Sélectionner-</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                </select>
                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></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';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select Success

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Input Select *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__select  af-form__select--valid">
            <div class="af-form__select-container">
                <select class="af-form__input-select" name="inputtextname" type="text">
                    <option value="0">-Sélectionner-</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                </select>
                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                </svg>
                <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';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select Error

Message d'erreur
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Input Select *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__select  af-form__select--error">
            <div class="af-form__select-container">
                <select class="af-form__input-select" name="inputtextname" type="text">
                    <option value="0">-Sélectionner-</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                </select>
                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                </svg>
            </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';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select Disabled

Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Input Select *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__select  af-form__select--disabled">
            <div class="af-form__select-container">
                <select class="af-form__input-select" name="inputtextname" type="text" disabled="disabled">
                    <option value="0">-Sélectionner-</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                    <option value="4">Option 4</option>
                </select>
                <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                    <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></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';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select inline

Aide à la saisie
Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Inline fields *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__fields-inline">
            <div class="af-form__select af-form__input-inline">
                <div class="af-form__select-container">
                    <select class="af-form__input-select" name="inputtextname" type="text">
                        <option value="0">-Sélectionner-</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                    </select>
                    <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                    </svg>
                </div><small class="af-form__message">Aide à la saisie</small>
            </div>
            <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>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select inline Error

Message d'erreur
Message d'erreur
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Inline fields *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__fields-inline">
            <div class="af-form__select  af-form__select--error af-form__input-inline">
                <div class="af-form__select-container">
                    <select class="af-form__input-select" name="inputtextname" type="text">
                        <option value="0">-Sélectionner-</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                    </select>
                    <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                    </svg>
                </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 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">
                    <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>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

Input Select inline Success

Aide à la saisie
Aide à la saisie
Copied
<div class="af-form__group row">
    <div class="col-md-2">
        <label class="af-form__group-label" for="select1">Inline fields *</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__fields-inline">
            <div class="af-form__select  af-form__select--valid af-form__input-inline">
                <div class="af-form__select-container">
                    <select class="af-form__input-select" name="inputtextname" type="text">
                        <option value="0">-Sélectionner-</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                    </select>
                    <svg class="glyphicon glyphicon-menu-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                        <path d="M98.4,16.2c0.7,0.3,1.1,1,1.1,2.1v15.9c0,0.9-0.3,1.6-0.9,2.3L51.8,83.2c-0.5,0.5-1.1,0.7-1.8,0.7
	s-1.3-0.2-1.8-0.7L1.4,36.5c-0.6-0.7-0.9-1.4-0.9-2.3V18.3c0-1.1,0.4-1.8,1.1-2.1c0.7-0.3,1.5-0.1,2.3,0.7L50,63l46.1-46.1
	C96.9,16.1,97.6,15.9,98.4,16.2L98.4,16.2z"></path>
                    </svg>
                    <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 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>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

@mixin _set-message-type($color) {
    .af-form__input-text {
        border: 1px solid $color;
        color: $color;
    }

    .af-form__select-container {
        border: 1px solid $color;
        color: $color;
    }
}

.af-form {
    &__select {
        position: relative;

        &--success,
        &--valid {
            .af-form__select-container {
                margin-right: 1rem;
            }

            &::after {
                font-family: $font-family-icon;
                content: '\EABA';
                color: $color-malachite;
            }

            >.af-btn--circle,
            >.af-form__message {
                display: none;
            }
        }

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

            .glyphicon-ok {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(0, -50%);
                width: 17px;
                fill: $color-btn-success;
                margin-left: 2px;
            }
        }

        &-container {
            position: relative;
            border: 1px solid $color-silver;
            background: $white;
            display: inline-block;
        }

        &--disabled {
            .af-form__select-container {
                cursor: not-allowed;
                background: $color-mercury;
            }
        }

        &--error {
            @include _set-message-type($color-red-axa);

            select {
                color: $color-red-axa;
            }
        }

        &--warning {
            @include _set-message-type($color-orange-dark);
        }

        .glyphicon-menu-down {
            position: absolute;
            right: 1em;
            font-size: 0.7em;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__input-select {
        border: 0;
        background: transparent;
        position: relative;
        z-index: 1;
        padding: 0.5em 2.7em 0.5em 1em;
        font-size: 1em;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

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

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

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.

1) Définition

Select est un type de saisie utilisé dans des formulaires, où l’utilisateur peut choisir une donnée parmi une sélection qui lui est soumis.

2) Use case

Le select est utilisé dans le cadre d’un formulaire pour saisir de la donnée, mais aussi sert à filtrer des informations dans une page ou un tableau.

select

3) DO/DONT

Un select ne doit pas être utilisé pour une liste inférieure à 5 options dans le cas d’un formulaire. On préfèrera des boutons radios.

select select

4) Utilisation

a) Position

Le select doit être placé à droite de son label.

b) Alignement

Le select sera ferré à gauche de la colonne de saisie, à la même hauteur.

select

c) Contenu

Inactif, le select doit indiquer « Sélectionner » ou tout autre rédactionnel invitant à faire la sélection demandée par son label.

d) Rédaction

  • Les options doivent être les plus courtes et concises que possible, tout en étant suffisamment claires par rapport au label pour faciliter le choix.-
  • Le contenu de la liste peut être basé sur la fréquence de la réponse si les statistiques et la lecture le permet, l’ordre alphabétique sera préféré si l’usage le rend plus compréhensible.

e) Pictogrammes

Aucun pictogramme ne doit être utilisé en plus du label et de la flèche déjà présents dans le composant.

f) Action

La liste des options doit toujours s’afficher en dessous du composant.

select

g) États

  • Vide
  • Focus - ouvert
  • Erreur
  • Désactivé
  • Validé
select

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-select/dist/select.scss';

Structure

A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.

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-select 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