Grensesnitt som fremstår som en kontroll med flere knapper der brukeren kan velge kun ett valg.
Knappevelger
<div class="button-toggle">
<input type="radio" class="button-toggle__radio" id="option-1" name="option">
<label for="option-1" class="button-toggle__label">Valg 1</label>
<input type="radio" class="button-toggle__radio" id="option-2" name="option">
<label for="option-2" class="button-toggle__label">Valg 2</label>
<input type="radio" class="button-toggle__radio" id="option-3" name="option" checked>
<label for="option-3" class="button-toggle__label">Valg 3</label>
<input type="radio" class="button-toggle__radio" id="option-4" name="option">
<label for="option-4" class="button-toggle__label">Valg 4</label>
</div>
<div class="button-toggle button-toggle--icon">
<input type="radio" class="button-toggle__radio" id="option-2-1" name="option2">
<label for="option-2-1" class="button-toggle__label">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 23.2,2.054c0.027-0.414-0.287-0.771-0.7-0.798c-0.016-0.001-0.032-0.002-0.048-0.002H1.5 c-0.414,0-0.75,0.336-0.75,0.75c0,0.017,0.001,0.033,0.002,0.05c0.361,5.033,4.028,9.21,8.972,10.22v9.875 c0,0.414,0.336,0.75,0.75,0.75c0.175,0,0.345-0.062,0.48-0.174l3-2.5c0.171-0.142,0.27-0.353,0.27-0.576v-7.375 C19.169,11.266,22.838,7.088,23.2,2.054z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
Valg 1
</label>
<input type="radio" class="button-toggle__radio" id="option-2-2" name="option2">
<label for="option-2-2" class="button-toggle__label">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 3,0.748c1.243,0,2.25,1.007,2.25,2.25S4.243,5.248,3,5.248s-2.25-1.007-2.25-2.25S1.757,0.748,3,0.748z " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 3,9.748c1.243,0,2.25,1.007,2.25,2.25s-1.007,2.25-2.25,2.25s-2.25-1.007-2.25-2.25S1.757,9.748,3,9.748z " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 3,18.748 c1.243,0,2.25,1.007,2.25,2.25s-1.007,2.25-2.25,2.25s-2.25-1.007-2.25-2.25S1.757,18.748,3,18.748z " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 8.25,3.748h15 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 8.25,12.748 h15 " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 8.25,21.748h15" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
Valg 2
</label>
<input type="radio" class="button-toggle__radio" id="option-2-3" name="option2" checked>
<label for="option-2-3" class="button-toggle__label">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="24" width="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 10.546,2.438c0.723,0.803,1.961,0.868,2.764,0.144c0.051-0.046,0.099-0.094,0.144-0.144L14.4,1.4 c0.725-0.803,1.964-0.866,2.767-0.14c0.437,0.395,0.673,0.965,0.643,1.553l-0.071,1.4c-0.054,1.08,0.777,2,1.857,2.054 c0.065,0.003,0.129,0.003,0.194,0l1.4-0.071c1.081-0.053,2,0.78,2.053,1.86c0.029,0.587-0.207,1.156-0.643,1.55l-1.042,0.94 c-0.803,0.726-0.866,1.965-0.141,2.768c0.044,0.049,0.091,0.096,0.141,0.141l1.042,0.94c0.803,0.725,0.866,1.964,0.14,2.767 c-0.395,0.437-0.965,0.673-1.553,0.643l-1.4-0.071c-1.08-0.056-2,0.775-2.056,1.855c-0.003,0.067-0.003,0.134,0,0.201l0.071,1.4 c0.048,1.081-0.789,1.996-1.87,2.044c-0.579,0.026-1.14-0.206-1.532-0.634l-0.941-1.041c-0.725-0.803-1.964-0.866-2.767-0.141 c-0.049,0.045-0.097,0.092-0.141,0.141L9.606,22.6c-0.728,0.8-1.967,0.859-2.767,0.131c-0.431-0.392-0.665-0.956-0.639-1.539 l0.072-1.4c0.056-1.08-0.775-2-1.855-2.056c-0.067-0.003-0.134-0.003-0.201,0l-1.4,0.071c-1.08,0.056-2.001-0.773-2.057-1.853 C0.728,15.366,0.963,14.795,1.4,14.4l1.041-0.94c0.803-0.726,0.866-1.965,0.141-2.768c-0.044-0.049-0.091-0.096-0.141-0.141 L1.4,9.606C0.599,8.879,0.539,7.641,1.265,6.84C1.658,6.407,2.225,6.172,2.809,6.2l1.4,0.071c1.08,0.057,2.001-0.773,2.058-1.852 c0.004-0.069,0.004-0.138,0-0.208L6.2,2.81C6.149,1.729,6.984,0.812,8.065,0.761C8.648,0.734,9.213,0.968,9.606,1.4L10.546,2.438z " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 12,7.501c2.485,0,4.5,2.015,4.5,4.5s-2.015,4.5-4.5,4.5s-4.5-2.015-4.5-4.5S9.515,7.501,12,7.501z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
Valg 3
</label>
<input type="radio" class="button-toggle__radio" id="option-2-4" name="option2">
<label for="option-2-4" class="button-toggle__label">
<svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" height="24" width="24"><g transform="matrix(1,0,0,1,0,0)"><path d="M 12,5.251C7.969,5.183,3.8,8,1.179,10.885c-0.57,0.633-0.57,1.593,0,2.226C3.743,15.935,7.9,18.817,12,18.748 c4.1,0.069,8.258-2.813,10.824-5.637c0.57-0.633,0.57-1.593,0-2.226C20.2,8,16.031,5.183,12,5.251z " stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M 15.75,12 c-0.001,2.071-1.68,3.75-3.751,3.749s-3.75-1.68-3.749-3.751C8.251,9.927,9.929,8.249,12,8.249c2.071-0.001,3.749,1.677,3.75,3.748 C15.75,11.998,15.75,11.999,15.75,12z" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
Valg 4
</label>
</div>
<div class="button-toggle button-toggle--small">
<input type="radio" class="button-toggle__radio" id="option-3-1" name="option3">
<label for="option-3-1" class="button-toggle__label">Valg 1</label>
<input type="radio" class="button-toggle__radio" id="option-3-2" name="option3">
<label for="option-3-2" class="button-toggle__label">Valg 2</label>
<input type="radio" class="button-toggle__radio" id="option-3-3" name="option3" checked>
<label for="option-3-3" class="button-toggle__label">Valg 3</label>
<input type="radio" class="button-toggle__radio" id="option-3-4" name="option3">
<label for="option-3-4" class="button-toggle__label">Valg 4</label>
</div>