Tri-state Check box in HTML?

html

responsive-design

cross-browser-compatibility

accessibility

byAnton Shumikhin·Jan 8, 2025

Develop a tri-state checkbox using JavaScript and a data-state attribute for state management. Set a click event listener to rotate the checkbox through unchecked, checked, and indeterminate states:

<input type="checkbox" id="tristate" data-state="unchecked">

let checkbox = document.getElementById('tristate');
checkbox.addEventListener('click', () => {
  let state = checkbox.dataset.state;
  // We've got a state-switcher here, definitely not a time-turner from Harry Potter! 😉
  switch(state) {
    case 'unchecked':
      checkbox.checked = checkbox.indeterminate = false;
      checkbox.dataset.state = 'checked'; // Moving to 'checked' state, not to be confused with a shopping list!
      break;
    case 'checked':
      checkbox.checked = true;
      checkbox.indeterminate = true; //Lost in the Bermuda Triangle of states!
      checkbox.dataset.state = 'indeterminate';
      break;
    case 'indeterminate':
      checkbox.checked = checkbox.indeterminate = false;
      checkbox.dataset.state = 'unchecked'; // Backing to square one!
      break;
  }
});

This piece of JavaScript magic makes the checkbox cycle: unchecked → checked → indeterminate with each click.

Understanding tri-state logic

It's crucial to understand that the indeterminate state of a tri-state checkbox is a visual state. It doesn't influence the value transmitted during form submission.

Styling the third state

To Art-Up the indeterminate state, apply a CSS class such as .some_selected. Further, use JavaScript to dynamically manage this class in tandem with the checkbox state.

JavaScript Magic with indeterminate

JavaScript does the heavy lifting for tri-state checkboxes. To set a checkbox to indeterminate, use element.indeterminate = true;. But remember, this is a visual state and doesn't influence the checkbox's value during a form submit.

Considering alternative routes

There are plenty of ways to simulate this behavior, such as a readonly text input cycling through Unicode characters upon a click event, or grouped radio buttons that offer yes, no, and null options, pointing towards a tri-state-like action.

Unicode: A visual charm

Enhance visual distinction between states by using Unicode characters or other icon libraries. Making these elements clickable adds a layer of interactivity to your UI.

Cross-Browser Compatibility

Ensure your tri-state checkbox works seamlessly across different browsers through thorough cross-browser compatibility testing.

Advanced checkboxes

For in-depth integrations or complex applications, consider options like the nicegui python component for tri-state checkboxes. This offers a more sophisticated solution.

Accessible for all

Accessibility matters! Custom interactive elements should be legible and operable for users with assistive technologies.

Supercharge "select all" option

The indeterminate state synergizes well with a "select all" function in a list, allowing users to visualize if all elements have been selected, or if the selection is partial.

Consistent design with tri-state

Ensure your tri-state checkbox intuitively communicates its unique behavior. Offer visual cues and tooltips to guide users. Conduct usability tests to understand the user's interaction with this advanced control.

Tick the right checkbox

Evaluate your use cases before deploying a tri-state checkbox. While it's an enriching UI element for complex forms and nested options, a standard checkbox suffices for binary choices.

explain-codes / Html / Tri-state Check box in HTML?

Linked

Testing if a checkbox is checked with jQuery



Post unchecked HTML checkboxes



Assign an initial value to radio button as checked



Find all unchecked checkboxes in jQuery



How to POST/Submit an Input Checkbox that is Disabled?

