AIMRAN
Talla
Guía de tallas
HTML + CSSFilters

Size selector

Round size buttons that fill with a bounce; a sold-out size is struck through and can't be picked.

Settings

16px
1x

Code

<div class="uv-fsz"><div class="tt">Size</div><div class="rw"><button class="">XS</button><button class="">S</button><button class="on">M</button><button class="">L</button><button class=" off" disabled>XL</button></div><div class="gs">Size guide</div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Filters

Filter chips

FiltersReact + Motion

Segmented control

FiltersReact + Motion

Multi-select dropdown

FiltersReact + Motion

Sliding pill filter chips

FiltersHTML + CSS

Centre-fill filter chips

FiltersHTML + CSS

Gradient border chips

FiltersHTML + CSS

Checkmark filter chips

FiltersHTML + CSS

Removable chips with X

FiltersHTML + CSS

Where to use it

Every clothing or trainer shop needs one on the product page. The chosen size fills with colour and a small bounce, while a sold-out size stays visible but crossed out, which is more honest than hiding it. A size guide link sits underneath for the undecided. It covers what most people mean by a size picker for e-commerce.

Circles work for letter sizes like XS to XL. Shoe sizes with halves, like 42.5, need wider pills. Keep the size guide close; it quietly cuts down on returns, which any shop owner will appreciate.