One of the best-known examples of CSS state management is the checkbox hack. What if we want a component to be in one of three, four, or seven modes? That is where the Radio State Machine comes in.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

A deep dive into the 'Radio State Machine' pattern — a CSS-only technique for managing multi-state UI using radio buttons instead of checkboxes. Covers the classic checkbox hack, how :has() improves flexibility, accessibility best practices (using appearance:none instead of hidden inputs), circular vs. linear vs. bi-directional state flows, and using CSS custom properties and math to drive entire visual systems from a single --state variable. Includes guidance on when to use CSS state vs. JavaScript.

The Radio State Machine

Hidden, not disabled (and not so accessible)