Button (Toggle)

Button (Toggle)

A toggle button is similar to a checkbox because it is either selected or not selected, and every toggle button can operate independent of all other toggle buttons. In fact, a checkbox can be an acceptable alternative to a toggle button.



Turn on a screen reader to experience this example in action.

Aria Toggle Button

HTML Source Code

<div>
    <div role="button" id="div-button" class="button" tabindex="0" aria-pressed="false" >Aria Toggle Button</div>
    <button type="button" id="native-button" aria-pressed="false" >Native Toggle Button</button>
</div>

JavaScript Source Code

window.addEventListener('load', function () {
    document.getElementById('div-button').addEventListener('click', divButtonClicked);
    document.getElementById('div-button').addEventListener('keydown', keydownButtonHandler);
    document.getElementById('native-button').addEventListener('click', nativeButtonClicked);
});

const CHECK_ICON = '<i class="fa-solid fa-circle-check icon success"></i>';
function divButtonClicked()
{
    var button = document.getElementById("div-button");
    var isAriaPressed = toggleButton(button);
    if(isAriaPressed)
    {
        button.innerHTML = "ARIA Toggle Button";
        button.classList.remove("pressed");
        
    }
    else
    {
        button.innerHTML = CHECK_ICON+" ARIA Toggle Button";
        button.classList.add("pressed");
    }             
}

function toggleButton(button)
{
    var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
    button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
    return isAriaPressed;
}

function nativeButtonClicked()
{
    var button = document.getElementById("native-button");
    var isAriaPressed = toggleButton(button);
    if(isAriaPressed)
        button.innerHTML = "Native Toggle Button";
    else
        button.innerHTML = CHECK_ICON+" Native Toggle Button";
}

function keydownButtonHandler(event) {
    if (event.keyCode === 32) {
        event.preventDefault();
        event.target.click();
    }
    else if (event.keyCode === 13) {
        event.preventDefault();
        event.target.click();
    }
}

CSS Source Code

.button { 
    padding: 5px 10px; 
    display: inline-block; 
    border: 2px solid gray;
    border-left: 1px solid lightgray;
    border-top: 1px solid lightgray;
    border-right: 2px solid gray;
    border-bottom: 2px solid gray;
    margin: 2px;
    background-color: #e8e5e5;
}
.pressed {
    border-left: 2px solid gray;
    border-top: 2px solid gray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    
}
button {     padding: 10px 10px; margin: 5px;}
.button:hover{
    outline: 2px solid blue;
}
.button:focus{
    margin: 2px;
    outline: 2px solid blue;
}
    

Copy and Paste Full Page Example