<div class="radio-buttons">
<div class="radio-buttons__group">
<input class="screen-reader-only" type="radio" id="all" name="radioGroupName" value="all" checked>
<label class="radio-buttons__button" for="all">All the data</label>
</div>
<div class="radio-buttons__group">
<input class="screen-reader-only" type="radio" id="locations" name="radioGroupName" value="locations">
<label class="radio-buttons__button" for="locations">Locations</label>
</div>
<div class="radio-buttons__group">
<input class="screen-reader-only" type="radio" id="recipients" name="radioGroupName" value="recipients">
<label class="radio-buttons__button" for="recipients">Recipients</label>
</div>
<div class="radio-buttons__group">
<input class="screen-reader-only" type="radio" id="titledesc" name="radioGroupName" value="titledesc">
<label class="radio-buttons__button" for="titledesc">Titles & Descriptions</label>
</div>
</div>
<div class="radio-buttons">
{% for radioItem in radioItems %}
<div class="radio-buttons__group">
<input class="screen-reader-only" type="radio" id="{{ radioItem.value }}" name="radioGroupName" value="{{ radioItem.value }}"{% if radioItem.default === true %} checked{% endif %}>
<label class="radio-buttons__button" for="{{ radioItem.value }}">{{ radioItem.name }}</label>
</div>
{% endfor %}
</div>
{
"radioGroupName": "search-filter",
"radioItems": [
{
"name": "All the data",
"value": "all",
"default": true
},
{
"name": "Locations",
"value": "locations"
},
{
"name": "Recipients",
"value": "recipients"
},
{
"name": "Titles & Descriptions",
"value": "titledesc"
}
]
}
.radio-buttons {
display: flex;
flex-wrap: wrap;
&__group {
margin-right: 12px;
&:last-of-type {
margin-right: 0;
}
}
&__button {
color: $black;
font-size: 16px;
font-weight: 400;
padding: 4px;
border-radius: 3px;
border: 1px solid $black;
&:hover {
cursor: pointer;
}
&:focus {
outline: 1px dashed red;
}
}
input[type="radio"] {
&:checked {
& ~ .radio-buttons__button {
background: $black;
color: $white;
}
}
&:focus {
& ~ .radio-buttons__button {
outline: 1px dashed $orange;
outline-offset: -2px;
}
}
}
&--bull {
--accent-color: #204ce5;
--focus-color: #6887ec;
display: grid;
margin: 1rem;
label {
display: grid;
grid-template-columns: 1rem auto;
gap: 1rem;
line-height: 1.1rem;
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
background-color: $white;
margin: 0;
color: currentColor;
width: 1.25rem;
height: 1.25rem;
border: 1px solid hsla(var(--gray-30-hsl), 1);
border-radius: 50%;
transform: translateY(-2px);
display: grid;
place-content: center;
}
input[type="radio"]::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
transform: scale(0);
transition: 200ms transform ease-in-out;
box-shadow: inset 1rem 1rem var(--accent-color);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="radio"]:focus {
border: 1px solid var(--accent-color);
outline: 4px solid var(--focus-color);
outline-offset: 1px;
transition: 50ms ease-in-out;
}
}
}
}
To be used in situations where the radio items are not visually pleasing. This makes use of labels styled as buttons.