{"id":4677,"date":"2024-12-05T11:20:50","date_gmt":"2024-12-05T16:20:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4677"},"modified":"2024-12-05T11:20:51","modified_gmt":"2024-12-05T16:20:51","slug":"multi-state-buttons","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/multi-state-buttons\/","title":{"rendered":"Multi-State Buttons"},"content":{"rendered":"\n

There are traditional ways for a user to pick one-option-from-many. The classics beeing a <select><\/code> or a group of <input type=\"radio\"><\/code> elements.<\/p>\n\n\n\n

But it’s nice to have more options. Sometimes when a user must choose one option from many, it\u2019s nice to have a single element that switches between available option on a quick click. A practical example of such a singular UI is a tag control that transitions through various states on each click. Any given tag in an interface like this could be be in three<\/em> different states:<\/p>\n\n\n\n

    \n
  1. Disregarded in search results (default state)<\/li>\n\n\n\n
  2. Search results must include<\/strong> tag<\/li>\n\n\n\n
  3. Search results must exclude<\/strong> tag<\/li>\n<\/ol>\n\n\n\n

    Here’s an image example of such a UI:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The Plan<\/h2>\n\n\n\n

    We\u2019ll be coding such a control using a set of stacked<\/em> HTML radio buttons. <\/p>\n\n\n\n

    The UI\u2019s functionality \u2014 jumping through different states on each click \u2014 is implemented by a bit of CSS-only trickery. We’ll be changing the value of the CSS property\u00a0pointer-events<\/code>\u00a0in the radio buttons when one is selected.<\/p>\n\n\n\n

    The\u00a0pointer-events<\/code>\u00a0property when applied to HTML elements determines whether a pointer event, such as a click<\/code> or hover<\/code> \u2014 through mouse pointer, touch event, stylus usage, etc \u2014 occurs on an element or not. By default, the events do occur in the elements, which is equivalent to setting pointer-events: auto;<\/code>. <\/p>\n\n\n\n

    If\u00a0pointer-events: none;<\/code> is set, that element won\u2019t receive any pointer events. This is useful for stacked or nested elements, where we might want a top element to ignore pointer events so that elements below it become the target.<\/p>\n\n\n\n

    The same will be used to create a multi-state control in this article. <\/p>\n\n\n\n

    Basic Demo<\/h2>\n\n\n\n

    Below is a basic control we\u2019ll be coding towards to demonstrate the technique. I\u2019ll also include a Pen for the movie tags demo, shown before, at the end.<\/p>\n\n\n\n