Radio switch

<!-- Container -->
<div class="container">
<!-- Radio container -->
<label class="container__label container__label--selected">
<input type="radio" class="container__input" />
<!-- Text -->
...
</label>
<!-- Other radio item -->
...
</div>
.container {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 9999px;
display: inline-flex;
padding: 4px;
}
.container__label {
border-radius: 9999px;
cursor: pointer;
padding: 4px 8px;
}
.container__label--selected {
/* For selected radio only */
background-color: #357edd;
color: #fff;
}
.container__input {
display: none;
}

Use cases

See also

Switch