<fieldset class="custom-toggle-group">
<legend>Custom toggle group</legend>
<div class="fieldset-grid">
<label>
<input type="radio" id="92cac2b9-0fe3-e391-40e7-8e41c11613ae" name="">
<span>Toggle 1</span>
</label>
<label>
<input type="radio" id="022d62fe-3b9d-728b-787c-89f5cf66c087" name="" checked>
<span>Toggle 2</span>
</label>
<label>
<input type="radio" id="b4f02e6a-44ea-1e92-c847-cef39f8749cd" name="">
<span>Toggle 3</span>
</label>
<label>
<input type="radio" id="b0d39e44-5b6d-5b35-86ee-285cbb759029" name="">
<span>Toggle 4</span>
</label>
</div>
</fieldset>
{{#> @fieldset--grid modifier="custom-toggle-group"}}
{{#each toggles}}
<label>
<input type="{{../type}}" id="{{random}}" name="{{../id}}" {{checked}}>
<span>{{label}}</span>
</label>
{{/each}}
{{/ @fieldset--grid}}
{
"legend": "Custom toggle group",
"type": "radio",
"name": "toggle-group",
"toggles": [
{
"id": "toggle-1",
"label": "Toggle 1"
},
{
"id": "toggle-2",
"label": "Toggle 2",
"checked": "checked"
},
{
"id": "toggle-3",
"label": "Toggle 3"
},
{
"id": "toggle-4",
"label": "Toggle 4"
}
]
}
/**
* Custom toggle group
*
* Supports input type radio or checkbox
*/
@media screen {
.custom-toggle-group input {
position: absolute;
left: -9999px;
}
.custom-toggle-group label {
margin: 0;
}
.custom-toggle-group label span {
background-color: var(--light-grey);
padding: 0.25em 0.5em;
border-radius: var(--form-radius);
box-shadow: var(--custom-toggle-shadow);
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0.75em 2em;
margin-top: 0;
}
.custom-toggle-group input:checked + span {
background-color: var(--toggle-checked);
color: var(--text-inverted);
}
.custom-toggle-group input + span::before {
content: "";
background-repeat: no-repeat;
background-size: contain;
height: 1.4em;
width: 1.4em;
margin-right: 0.25em;
flex: 0 0 auto;
}
/* Custom toggle: Checkbox */
.custom-toggle-group input[type="checkbox"] + span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z' fill='%23333'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
.custom-toggle-group input[type="checkbox"]:checked + span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%23fff'/%3E%3C/svg%3E");
}
/* Custom toggle: Radio button */
.custom-toggle-group input[type="radio"] + span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23333'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
.custom-toggle-group input[type="radio"]:checked + span::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' fill='%23fff'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}
}
This is a custom styled variation of either native HTML radio buttons or checkboxes. No JavaScript is required for it to work.
Just like traditional checkboxes and radio buttons, the functionality is identical. If you want single selection, use type: radio, and if you want multiple selection, type: checkbox is the choice.