An infinite selection design uses paired radio inputs per item to simulate endless add-to-cart interactions with smooth visual transitions. Each item contains two radios sharing the same name so selecting one automatically deselects the other, enabling a toggle behavior. Items and their inputs are absolutely positioned, and inset stretches inputs to cover the full clickable area. The interaction and animation are achieved with CSS alone, while a separate mechanism must track item counts. The technique simplifies single-click adds and produces a playful microinteraction, but duplicated interactive elements introduce accessibility and implementation limitations.
This post covers a design referred as infinite selection. Metaphorically infinite. Here's how it works: That's right, you click an item and it jumps right into the shopping cart, complete with a smooth transition that shows it happening. You can add as many items as you want! And guess what: all of it is done in CSS - well, except the part that keeps count of selected items - and all it took is a combination of radio form inputs in the markup.
Each item (or product, whatever you want to call it) is a wrapper that contains two radio form inputs sharing the same name value - a radio group. When you check one in a duo, the other gets unchecked automatically, leading to a see-saw of check and uncheck between the two, no matter which one is clicked. Each item (or radio group) is absolutely positioned, as are the two inputs it contains:
Collection
[
|
...
]