JSFiddle - React, Tailwind, and code Playground

by KCarnaille

HTML

<div class="f-radio-switch">
     <label class="f-radio">
        <input type="radio" name="radio" value="yes" checked="checked"/>
        <span>Oui</span>
    </label>
     <label class="f-radio">
        <input type="radio" name="radio" value="no" />
        <span>Non</span>
    </label>
</div>

CSS

/* develblock:start */
/*doc

---
title: Radio switch
name: f-radio-switch
parent: forms
---

```ui_example
<div class="f-radio-switch">
     <label class="">
        <input type="radio" name="radio" value="yes" checked="checked"/>
        <span>Oui</span>
    </label>
     <label class="">
        <input type="radio" name="radio" value="no" />
        <span>Non</span>
    </label>
</div>
```

*/
/* develblock:end */

$_switch-height: 44px;
$_switch-width: 380px;
$bg-color-checked: $_color-secondary;
$border-color: $_color-secondary;
$text-default-color: $_color-secondary;

@mixin absoluteChoiceContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

@mixin containerFlex {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin resetBefore {
    border: 0;
    @include setSize(0);
}


.f-radio-switch {
    position: relative;
    cursor: pointer;
    display: flex;
    font-size: $_fs-xmain;
    overflow: hidden;
    @include setSize($_switch-width, $_switch-height);
    @include rad(all, $_switch-height);
    border: 1px solid $border-color;

    input[type="radio"] {
        //@include srOnly;
        //@include unselectable;
    }

    label.f-radio {
        @include setSize(50%, auto);
        @include containerFlex;

        input[type="radio"]:checked {
            & + span {
                color: $_color-white;
                background-color: $bg-color-checked;
                &::before {
                    @include resetBefore;
                }
            }
        }

        span {
            @include containerFlex;
            @include withTransition(all);
            align-self: stretch;
            flex: 1;
            &::before {
                @include resetBefore;
            }
        }
    }
}