Form Radio

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 Radio

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Classic radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio">
            <input class="af-form__input-radio" name="classic" type="radio" id="radio1" />
            <label class="af-form__label" for="radio1"><span class="af-form__description"> lorem ipsum dolor sit amet</span></label>
        </div>
        <div class="af-form__radio">
            <input class="af-form__input-radio" name="classic" type="radio" id="radio2" />
            <label class="af-form__label" for="radio2"><span class="af-form__description"> Nam sem nisi, auctor sit amet massa sit amet</span></label>
        </div>
        <div class="af-form__radio">
            <input class="af-form__input-radio" name="classic" type="radio" id="radio3" />
            <label class="af-form__label" for="radio3"><span class="af-form__description"> Ut sollicitudin eleifend tincidunt</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--disabled">
            <input class="af-form__input-radio" name="classic" type="radio" id="radio4" disabled="disabled" />
            <label class="af-form__label" for="radio4"><span class="af-form__description"> disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Success

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Classic radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio  af-form__radio--success">
            <input class="af-form__input-radio" name="classic-success" type="radio" id="radio5" />
            <label class="af-form__label" for="radio5"><span class="af-form__description"> lorem ipsum dolor sit amet</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--success">
            <input class="af-form__input-radio" name="classic-success" type="radio" id="radio6" />
            <label class="af-form__label" for="radio6"><span class="af-form__description"> Nam sem nisi, auctor sit amet massa sit amet</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--success">
            <input class="af-form__input-radio" name="classic-success" type="radio" id="radio7" />
            <label class="af-form__label" for="radio7"><span class="af-form__description"> Ut sollicitudin eleifend tincidunt</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--disabled">
            <input class="af-form__input-radio" name="classic-success" type="radio" id="radio8" disabled="disabled" />
            <label class="af-form__label" for="radio8"><span class="af-form__description"> disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Error

Message d'erreur
Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Classic radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio  af-form__radio--error">
            <input class="af-form__input-radio" name="classic-error" type="radio" id="radio9" />
            <label class="af-form__label" for="radio9"><span class="af-form__description"> lorem ipsum dolor sit amet</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--error">
            <input class="af-form__input-radio" name="classic-error" type="radio" id="radio10" />
            <label class="af-form__label" for="radio10"><span class="af-form__description"> Nam sem nisi, auctor sit amet massa sit amet</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--error">
            <input class="af-form__input-radio" name="classic-error" type="radio" id="radio11" />
            <label class="af-form__label" for="radio11"><span class="af-form__description"> Ut sollicitudin eleifend tincidunt</span></label>
        </div>
        <div class="af-form__radio  af-form__radio--error">
            <input class="af-form__input-radio" name="classic-error" type="radio" id="radio12" />
            <label class="af-form__label" for="radio12"><span class="af-form__description"> error</span></label>
        </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>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Classic Input Radio Inline

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Inline radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-inline">
            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio25" />
            <label class="af-form__label" for="radio25"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-inline">
            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio26" />
            <label class="af-form__label" for="radio26"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-inline">
            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio27" />
            <label class="af-form__label" for="radio27"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--disabled">
            <input class="af-form__input-radio" name="classic-inline" type="radio" id="radio28" disabled="disabled" />
            <label class="af-form__label" for="radio28"><span class="af-form__description"> Disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Success Inline

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Inline radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-inline  af-form__radio-inline--success">
            <input class="af-form__input-radio" name="classic-inline-success" type="radio" id="radio29" />
            <label class="af-form__label" for="radio29"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--success">
            <input class="af-form__input-radio" name="classic-inline-success" type="radio" id="radio30" />
            <label class="af-form__label" for="radio30"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--success">
            <input class="af-form__input-radio" name="classic-inline-success" type="radio" id="radio31" />
            <label class="af-form__label" for="radio31"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--disabled">
            <input class="af-form__input-radio" name="classic-inline-success" type="radio" id="radio32" disabled="disabled" />
            <label class="af-form__label" for="radio32"><span class="af-form__description"> Disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Error Inline

Message d'erreur
Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Inline radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-inline  af-form__radio-inline--error">
            <input class="af-form__input-radio" name="classic-inline-error" type="radio" id="radio33" />
            <label class="af-form__label" for="radio33"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--error">
            <input class="af-form__input-radio" name="classic-inline-error" type="radio" id="radio34" />
            <label class="af-form__label" for="radio34"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--error">
            <input class="af-form__input-radio" name="classic-inline-error" type="radio" id="radio35" />
            <label class="af-form__label" for="radio35"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-inline  af-form__radio-inline--error">
            <input class="af-form__input-radio" name="classic-inline-error" type="radio" id="radio36" />
            <label class="af-form__label" for="radio36"><span class="af-form__description"> Radio 4</span></label>
        </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>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Classic Input Radio Custom

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Custom Radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-custom">
            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio13" />
            <label class="af-form__label" for="radio13"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-custom">
            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio14" />
            <label class="af-form__label" for="radio14"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-custom">
            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio15" />
            <label class="af-form__label" for="radio15"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--disabled">
            <input class="af-form__input-radio" name="classic-custom" type="radio" id="radio16" disabled="disabled" />
            <label class="af-form__label" for="radio16"><span class="af-form__description"> Disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Success Custom

Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Custom Radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-custom  af-form__radio-custom--success">
            <input class="af-form__input-radio" name="classic-custom-success" type="radio" id="radio17" />
            <label class="af-form__label" for="radio17"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--success">
            <input class="af-form__input-radio" name="classic-custom-success" type="radio" id="radio18" />
            <label class="af-form__label" for="radio18"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--success">
            <input class="af-form__input-radio" name="classic-custom-success" type="radio" id="radio19" />
            <label class="af-form__label" for="radio19"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--disabled">
            <input class="af-form__input-radio" name="classic-custom-success" type="radio" id="radio20" disabled="disabled" />
            <label class="af-form__label" for="radio20"><span class="af-form__description"> Disabled</span></label>
        </div>
    </div>
</div>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

Input Radio Error Custom

Message d'erreur
Copied
<div class="row af-form__group af-form__group--label-top">
    <div class="col-md-2">
        <label class="af-form__group-label">Custom radio</label>
    </div>
    <div class="col-md-10">
        <div class="af-form__radio-custom  af-form__radio-custom--error">
            <input class="af-form__input-radio" name="classic-custom-error" type="radio" id="radio21" />
            <label class="af-form__label" for="radio21"><span class="af-form__description"> Radio 1</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--error">
            <input class="af-form__input-radio" name="classic-custom-error" type="radio" id="radio22" />
            <label class="af-form__label" for="radio22"><span class="af-form__description"> Radio 2</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--error">
            <input class="af-form__input-radio" name="classic-custom-error" type="radio" id="radio23" />
            <label class="af-form__label" for="radio23"><span class="af-form__description"> Radio 3</span></label>
        </div>
        <div class="af-form__radio-custom  af-form__radio-custom--error">
            <input class="af-form__input-radio" name="classic-custom-error" type="radio" id="radio24" />
            <label class="af-form__label" for="radio24"><span class="af-form__description"> Radio 4</span></label>
        </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>
Copied
@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';

.af-form {
    &__radio {
        display: block;
        align-items: center;
        position: relative;
        border-bottom: 1px solid $color-silver;

        &:nth-last-child(1) {
            border-bottom: 0;
        }
    }

    &__radio-inline {
        display: inline-flex;
        align-items: center;
        margin-right: 1rem;
        position: relative;

        .af-form__label {
            padding: 0;
        }
    }

    &__radio,
    &__radio-inline {
        &--error {
            .af-form__label {
                color: $color-red-axa;

                &::before {
                    border-color: $color-red-axa;
                }
            }
        }

        &--warning {
            .af-form__label {
                color: $color-orange-dark;

                &::before {
                    border-color: $color-orange-dark;
                }
            }
        }

        &--disabled {
            .af-form__label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

        .af-form__label {
            &::before {
                content: '';
                position: absolute;
                display: block;
                margin-right: 0.5em;
                width: 1.25rem;
                height: 1.25rem;
                background: $white;
                border: 1px solid $color-silver;
                border-radius: 100%;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                display: none;
                margin-right: 0.5em;
                width: 0.9rem;
                height: 0.9rem;
                background: $color-azur;
                border-radius: 100%;
                left: 3px;
                top: 50%;
                transform: translate(0, -50%);
            }
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                &::after {
                    display: block;
                }
            }

            &:focus+.af-form__label {
                color: $color-axa;

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

    &__radio-custom {
        display: inline-flex;
        align-items: center;
        margin: 0 0.3rem 0.3rem 0;
        text-align: center;
        position: relative;

        .af-form__label {
            padding: 0.6rem 2rem;
            background: $color-mercury;
            border: $color-gray;
            font-weight: normal;
            cursor: pointer;
            box-shadow: inset 0 -2px 0 0 $color-scorpion;
            margin: 0;
        }

        .af-form__description {
            padding: 0;
        }

        .af-form__input-radio {
            position: absolute;
            z-index: -1;
            visibility: hidden;

            &:checked+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }

            &:focus+.af-form__label {
                background-color: $color-azur;
                color: $white;
                box-shadow: 0 0 5px $color-axa;
            }
        }

        &--disabled {
            .af-form__label {
                cursor: not-allowed;
                opacity: 0.6;
                box-shadow: inset 0 -2px 0 0 $color-silver;
            }

            .af-form__description {
                opacity: 0.4;
            }
        }

        &--error {
            .af-form__label {
                background: $error-custom-bg;
                border: 1px solid $error-custom-border;
                color: $color-red-axa;
                box-shadow: inset 0 -2px 0 0 $color-red-axa;
            }
        }

        &--warning {
            .af-form__label {
                background: $color-alertDanger-bgColor;
                border: 1px solid $color-alertDanger-colorBorder;
                color: $color-orange-dark;
                box-shadow: inset 0 -2px 0 0 $color-orange-dark;
            }
        }

        &:hover {
            .af-form__label {
                background-color: $color-azur;
                border-color: $color-axa;
                color: $white;
                box-shadow: inset 0 -2px 0 0 $color-axa;
            }
        }
    }
}

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

Les boutons radio sont utilisés pour sélectionner parmi une liste d’options mutuellement exclusives.

2) Use case

  • Les boutons radios sont utilisés pour une saisie spécifique entre des choix déterminés
  • La saisie peut être rendue obligatoire avec l’utilisation d’une astérisque rouge à la suite du label.
  • L’utilisation d’une ou plusieurs listes de boutons radios doit être accompagné d’un CTA d’enregistrement de la saisie.
radio

3) DO/DONT

  • La liste de boutons radio n’est valable que jusqu’à 5 options. Au-delà on préfèrera un select avec des options groupées, ou découper la liste en deux questions afin de préciser les éléments de la liste.
  • Dans les cas ou il n’y a que deux options mutuellement exclusives (oui/non), Il sera impossible d’avoir aucune option sélectionné
  • On évitera au maximum d’avoir des réponses sur deux lignes avec des boutons radio.
radio radio

4) Avancé

  • Contrairement à l’usage courant, on peut désactiver le bouton sélectionné pour n’avoir aucun choix sélectionné.
  • On utilisera de préférence les boutons radio aux listes radios dans les formulaires de saisie.
radio

5) Utilisation

a) Position

  • Les boutons radio sont toujours à droite de leur label.
  • Le label est centré dans la hauteur avec la première ligne de boutons ou puces radio.

b) Alignement

Le bouton radio et son label sont ferrés à gauche de leur bloc parent. Le label sera contenu de préférence sur une ligne de 224 px de large soit 2 colonnes.

radio

c) Contenu

Le texte dans le bouton radio — ou accompagnant la puce — doit être le plus clair et concis que possible.

d) Rédaction

Afin de présenter le contexte de la liste de boutons radio, une phrase d’introduction peut être utilisée. Elle devra être traitée comme un [paragraphe].

f) Variations

  • Boutons radio
  • Puces radio
radio

g) États

  • Sélectionné
  • Inactif
  • Erreur
  • Désactivé
radio

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-radio/dist/radio.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-radio 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