Product option
The choices on a product page (size, color, material) that combine into the exact item a shopper is actually buying.
See it
What it is
An option is the axis of choice ('Size'), its option values are the points on that axis ('S', 'M', 'L'), and a variant is one full combination ('M / Black') that carries its own SKU, price, image, and stock count. People say 'option' when they mean any of the three, so pin down which layer you are talking about before building anything.
Reach for options the moment a product ships in more than one flavor. Two to three options is the sweet spot: size, color, material. Render them as swatches when the value is visual (color, finish) and as buttons or a dropdown when it is not (storage size, length).
Gotcha: variants multiply. Three options with 6, 5, and 4 values is 120 variants, each needing a price and a stock number, and most platforms cap how many you get (Shopify held the line at three options per product for years). Second gotcha: never hide combinations that are sold out. Show them disabled with the reason, or shoppers assume the picker is broken.
Ask AI for it
Build a product option selector for a product detail page. Render each option group as a labelled row: 'Color' as round swatch chips that swap the main gallery image on select, 'Size' as a row of pill buttons with a 'Size guide' link beside the label. Mark the selected value with a solid ring, keep sold-out combinations visible but disabled with a diagonal strikethrough and a 'Sold out' tooltip, and show the resolved variant price and stock state below the picker. Use real radio inputs under the hood so keyboard and screen reader users get arrow-key selection and a group label.