Skip to main content

← The UX Guide Vol. 1: Luxury Ecommerce

Size and Color Selectors

Amina Muaddi radio list with text labels / 17 values one is chosen on load
35 35.5 36 36.5 37 37.5 38 38.5 39 39.5 40 40.5
rebuilt / chosen shown by 1px underline, #121212
Amina Muaddi size selector photographed on its product page, 17 values as a radio list with text labels
photographed on aminamuaddi.com
Aubercy native select / 16 values one is chosen on load
Pointure
rebuilt / chosen shown by the value shown in the closed select
Aubercy size selector photographed on its product page, 16 values as a native select
photographed on aubercy.com
Shinola radio list with text labels / 15 values nothing chosen on load
5 5.5 6 6.5 7 7.5 8 8.5 9 9.5 10 10.5
rebuilt / chosen shown by filled #121212 (unselected #eae5db)
Shinola size selector photographed on its product page, 15 values as a radio list with text labels
photographed on shinola.com
Adam Lippes radio list with text labels / 9 values one is chosen on load
00 0 2 4 6 8 10 12 14
rebuilt / chosen shown by cell::after opacity: 0.5 (unselected 0)
Adam Lippes size selector photographed on its product page, 9 values as a radio list with text labels
photographed on adamlippes.com
Aspesi radio list with text labels / 8 values one is chosen on load
34 36 38 40 42 44 46 48
rebuilt / chosen shown by opacity 1 (unselected 0.5)
Aspesi size selector photographed on its product page, 8 values as a radio list with text labels
photographed on aspesi.com
Alberta Ferretti radio list with text labels / 7 values nothing chosen on load
36 IT 38 IT 40 IT 42 IT 44 IT 46 IT 48 IT
rebuilt / chosen shown by 1px underline, #222222
Alberta Ferretti size selector photographed on its product page, 7 values as a radio list with text labels
photographed on albertaferretti.com
Barena Venezia radio list with text labels / 7 values one is chosen on load
36 38 40 42 44 46 48
rebuilt / chosen shown by text #1c1c1c (unselected #1c1c1c)
Barena Venezia size selector photographed on its product page, 7 values as a radio list with text labels
photographed on barenavenezia.com
Bode radio list with text labels / 7 values nothing chosen on load
XXS XS S M L XL XXL
rebuilt / chosen shown by border 1px solid rgb(0, 0, 0) (unselected 1px solid rgb(212, 212, 212))
Bode size selector photographed on its product page, 7 values as a radio list with text labels
photographed on bode.com
Moschino radio list with text labels / 7 values nothing chosen on load
36 IT 44 IT 38 IT 46 IT 40 IT 48 IT 42 IT
rebuilt / chosen shown by no computed difference between chosen and unchosen
Moschino size selector photographed on its product page, 7 values as a radio list with text labels
photographed on moschino.com
Philosophy di Lorenzo Serafini radio list with text labels / 7 values nothing chosen on load
36 IT 38 IT 40 IT 42 IT 44 IT 46 IT 48 IT
rebuilt / chosen shown by 1px underline, #222222
Philosophy di Lorenzo Serafini size selector photographed on its product page, 7 values as a radio list with text labels
photographed on philosophyofficial.com
A.P.C. radio list with text labels / 6 values nothing chosen on load
XS S M L XL XXL
rebuilt / chosen shown by 46x1px underline bar, #000000
A.P.C. size selector photographed on its product page, 6 values as a radio list with text labels
photographed on apc.fr
Brain Dead radio list with text labels / 6 values nothing chosen on load
XS S M L XL XXL
rebuilt / chosen shown by 62x38px outline box, 2px #beef6a
Brain Dead size selector photographed on its product page, 6 values as a radio list with text labels
photographed on wearebraindead.com
Dries Van Noten div cells / 6 values one is chosen on load
34 36 38 40 42 44
rebuilt / chosen shown by no computed difference between chosen and unchosen
Dries Van Noten size selector photographed on its product page, 6 values as a div cells
photographed on driesvannoten.com
Kith radio list with text labels / 6 values nothing chosen on load
XS S M L XL XXL
rebuilt / chosen shown by no computed difference between chosen and unchosen
Kith size selector photographed on its product page, 6 values as a radio list with text labels
photographed on kith.com
Patou radio list with text labels / 6 values one is chosen on load
34 36 38 40 42 44
rebuilt / chosen shown by 1px underline, #051c2c
Patou size selector photographed on its product page, 6 values as a radio list with text labels
photographed on patou.com
Thom Browne buttons / 6 values nothing chosen on load
0 1 2 3 4 5
rebuilt / chosen shown by no computed difference between chosen and unchosen
Agolde native select / 5 values one is chosen on load
Size
rebuilt / chosen shown by the value shown in the closed select
Agolde size selector photographed on its product page, 5 values as a native select
photographed on agolde.com
Alessandra Rich radio list with text labels / 5 values one is chosen on load
65 70 75 80 85
rebuilt / chosen shown by filled #121212 (unselected rgba(0, 0, 0, 0))
Alessandra Rich size selector photographed on its product page, 5 values as a radio list with text labels
photographed on alessandrarich.com
Bianca Saunders radio list with text labels / 5 values one is chosen on load
XS S M L XL
rebuilt / chosen shown by filled #000000 (unselected #ffffff)
Bianca Saunders size selector photographed on its product page, 5 values as a radio list with text labels
photographed on biancasaunders.com
Browns Fashion radio list with text labels / 5 values one is chosen on load
XS S M L XL
rebuilt / chosen shown by border 2px solid rgb(255, 255, 255) (unselected 1px solid rgba(51, 51, 51, 0.1))
Browns Fashion size selector photographed on its product page, 5 values as a radio list with text labels
photographed on brownsfashion.com
Donna Karan radio list with text labels / 5 values nothing chosen on load
XS S M L XL
rebuilt / chosen shown by border 1px solid rgb(81, 81, 81) (unselected 1px solid rgb(224, 224, 224))
Donna Karan size selector photographed on its product page, 5 values as a radio list with text labels
photographed on donnakaran.com
Filson radio list with text labels / 5 values nothing chosen on load
XS S M L XL
rebuilt / chosen shown by filled #2a2a22 (unselected #dacbb7)
Khaite radio list with text labels / 5 values one is chosen on load
XS S M L XL
rebuilt / chosen shown by 1px underline, #000000
Khaite size selector photographed on its product page, 5 values as a radio list with text labels
photographed on khaite.com
Proenza Schouler radio list with text labels / 5 values nothing chosen on load
36 37 38 39 40
rebuilt / chosen shown by 22x18px outline box, 1px #000000
Viktor&Rolf Fragrance radio list with text labels / 5 values nothing chosen on load
XS S M L XL
rebuilt / chosen shown by 9x1px underline bar, #000000
Viktor&Rolf Fragrance size selector photographed on its product page, 5 values as a radio list with text labels
photographed on viktor-rolf.com
Agnona radio list with text labels / 4 values one is chosen on load
S M L XL
rebuilt / chosen shown by border 0px solid rgb(147, 98, 68) (unselected 0px solid rgb(205, 205, 205))
Agnona size selector photographed on its product page, 4 values as a radio list with text labels
photographed on agnona.com
Astley Clarke span cells / 4 values nothing chosen on load
UK J / US 5 UK L / US 6 UK N / US 7 UK P / US 8
rebuilt / chosen shown by border 1px solid rgb(80, 87, 103) (unselected 1px solid rgb(229, 225, 221))
Astley Clarke size selector photographed on its product page, 4 values as a span cells
photographed on astleyclarke.com
Garrard radio list with text labels / 4 values one is chosen on load
50 51 52 56
rebuilt / chosen shown by border 1px solid rgb(34, 34, 34) (unselected 1px solid rgb(246, 246, 248))
Garrard size selector photographed on its product page, 4 values as a radio list with text labels
photographed on garrard.com
Ahluwalia radio list with text labels / 3 values one is chosen on load
XS/S M/L XL/XXL
rebuilt / chosen shown by border 1px solid rgb(34, 34, 34) (unselected 1px solid rgb(222, 222, 222))
Ahluwalia size selector photographed on its product page, 3 values as a radio list with text labels
photographed on ahluwalia.world
Alighieri radio list with text labels / 3 values one is chosen on load
J M P
rebuilt / chosen shown by 1px underline, #000000
Alighieri size selector photographed on its product page, 3 values as a radio list with text labels
photographed on alighieri.com
Anordain radio list with text labels / 3 values one is chosen on load
SMALL MEDIUM LARGE
rebuilt / chosen shown by opacity 1 (unselected 0.5)
Anordain size selector photographed on its product page, 3 values as a radio list with text labels
photographed on anordain.com
Antonio Marras buttons / 3 values nothing chosen on load
S M L
rebuilt / chosen shown by filled #000000 (unselected #ffffff)
Antonio Marras size selector photographed on its product page, 3 values as a buttons
photographed on antoniomarras.com
Baum und Pferdgarten span cells / 3 values nothing chosen on load
S M L
rebuilt / chosen shown by nothing marked as chosen
Baum und Pferdgarten size selector photographed on its product page, 3 values as a span cells
photographed on baumundpferdgarten.com
Begg x Co li cells / 3 values one is chosen on load
S M L
rebuilt / chosen shown by weight 700 (unselected 400)
Begg x Co size selector photographed on its product page, 3 values as a li cells
photographed on beggxco.com
Bell & Ross radio list with text labels / 3 values one is chosen on load
S M L
rebuilt / chosen shown by 0.5px outline, #000000 (spread shadow)
Bell & Ross size selector photographed on its product page, 3 values as a radio list with text labels
photographed on bellross.com
Officine Universelle Buly radio list with text labels / 3 values one is chosen on load
La Benjamine La Cadette L'Aînée
rebuilt / chosen shown by border 1px solid rgb(13, 66, 37) (unselected 1px solid rgb(221, 221, 221))
Officine Universelle Buly size selector photographed on its product page, 3 values as a radio list with text labels
photographed on buly1803.com
Oribe radio list with text labels / 3 values one is chosen on load
Standard (8.5 oz) Travel (2.5 oz) Liter (33.8 oz)
rebuilt / chosen shown by filled #000000 (unselected #ffffff)
Oribe size selector photographed on its product page, 3 values as a radio list with text labels
photographed on oribe.com
Rick Owens td cells / 3 values nothing chosen on load
38 40 44
rebuilt / chosen shown by nothing marked as chosen
Rick Owens size selector photographed on its product page, 3 values as a td cells
photographed on rickowens.eu
Smith Optics radio list with text labels / 3 values one is chosen on load
Small Medium Large
rebuilt / chosen shown by border 1px solid rgb(24, 24, 24) (unselected 1px solid color(srgb 0.0941176 0.0941176 0.0941176 / 0.05))
Smith Optics size selector photographed on its product page, 3 values as a radio list with text labels
photographed on smithoptics.com
Analog Shift radio list with text labels / 2 values one is chosen on load
16MM 18MM
rebuilt / chosen shown by border 2px solid rgb(0, 0, 0) (unselected 2px solid rgb(242, 242, 242))
Analog Shift size selector photographed on its product page, 2 values as a radio list with text labels
photographed on analogshift.com
Balmain buttons / 2 values nothing chosen on load
S/M LXL
rebuilt / chosen shown by nothing marked as chosen
Balmain size selector photographed on its product page, 2 values as a buttons
photographed on balmain.com
Biologique Recherche radio list with text labels / 2 values one is chosen on load
ml 30 ml ml 8 ml
rebuilt / chosen shown by 10x10px block, #0e2243
Biologique Recherche size selector photographed on its product page, 2 values as a radio list with text labels
photographed on biologique-recherche.com
Fauré Le Page links to sibling products / 2 values one is chosen on load
16 22
rebuilt / chosen shown by 32px ring, 1px #fbba00
Fauré Le Page size selector photographed on its product page, 2 values as a links to sibling products
photographed on faurelepage.com
Fenty Beauty radio list with text labels / 2 values one is chosen on load
standard mini
rebuilt / chosen shown by border 1px solid rgb(45, 41, 41) (unselected 1px solid rgb(216, 216, 216))
Fenty Beauty size selector photographed on its product page, 2 values as a radio list with text labels
photographed on fentybeauty.com
La Prairie radio list with text labels / 2 values one is chosen on load
50 ml / 1.7 oz 100 ml / 3.4 oz.
rebuilt / chosen shown by border 1px solid rgb(62, 62, 71) (unselected 1px solid rgb(229, 229, 231))
La Prairie size selector photographed on its product page, 2 values as a radio list with text labels
photographed on laprairie.com
Lab Series radio list with text labels / 2 values one is chosen on load
50.0 ml 100.0 ml
rebuilt / chosen shown by border 2px solid rgb(17, 17, 17) (unselected 1px solid rgb(118, 118, 118))
Lab Series size selector photographed on its product page, 2 values as a radio list with text labels
photographed on labseries.com
Living Proof radio list with text labels / 2 values one is chosen on load
Travel 1.7 oz $18 Full 5 oz $32
rebuilt / chosen shown by outline rgb(3, 9, 9) solid 1px
Living Proof size selector photographed on its product page, 2 values as a radio list with text labels
photographed on livingproof.com
Philosophy buttons / 2 values one is chosen on load
4oz 16oz
rebuilt / chosen shown by filled #888888 (unselected #f5f5f5)
Philosophy size selector photographed on its product page, 2 values as a buttons
photographed on philosophy.com
SK-II radio list with text labels / 2 values one is chosen on load
1.6 oz 2.7 oz
rebuilt / chosen shown by border 1px solid rgb(22, 22, 22) (unselected 1px solid rgb(248, 244, 237))
SK-II size selector photographed on its product page, 2 values as a radio list with text labels
photographed on sk-ii.com
Sulwhasoo span cells / 2 values one is chosen on load
200ml 400ml
rebuilt / chosen shown by weight 700 (unselected 500)
Sulwhasoo size selector photographed on its product page, 2 values as a span cells
photographed on sulwhasoo.com
Tatcha radio list with text labels / 2 values one is chosen on load
Full Size Mini
rebuilt / chosen shown by border 1px solid rgb(20, 20, 20) (unselected 1px solid rgb(227, 226, 223))
Tatcha size selector photographed on its product page, 2 values as a radio list with text labels
photographed on tatcha.com
Vogue Eyewear native select / 2 values one is chosen on load
Frame size
rebuilt / chosen shown by the value shown in the closed select
Vogue Eyewear size selector photographed on its product page, 2 values as a native select
photographed on vogue-eyewear.com
Asprey square / 50×50px / 14 swatches
rebuilt / chosen shown by cell text-decoration-line: none (unselected line-through)
Asprey color selector photographed on its product page, 14 square swatches
photographed on asprey.com
Baum und Pferdgarten tall rectangle / 27×39px / 12 swatches
rebuilt / chosen shown by 142x22px underline bar, #0f0f0f
Baum und Pferdgarten color selector photographed on its product page, 12 tall rectangle swatches
photographed on baumundpferdgarten.com
Lancel square / 80×80px / 8 swatches
rebuilt / chosen shown by border 1px solid rgb(14, 6, 7) (unselected 1px solid rgba(0, 0, 0, 0))
Lancel color selector photographed on its product page, 8 square swatches
photographed on lancel.com
Repossi square / 80×80px / 7 swatches
rebuilt / chosen shown by nothing marked as chosen
Repossi color selector photographed on its product page, 7 square swatches
photographed on repossi.com
Hourglass square / 32×32px / 6 swatches
rebuilt / chosen shown by nothing marked as chosen
Hourglass color selector photographed on its product page, 6 square swatches
photographed on hourglasscosmetics.com
Amina Muaddi tall rectangle / 48×75px / 5 swatches
rebuilt / chosen shown by 1px underline, #000000
Amina Muaddi color selector photographed on its product page, 5 tall rectangle swatches
photographed on aminamuaddi.com
Carrera Eyewear square / 70×70px / 5 swatches
rebuilt / chosen shown by border 0px none rgb(255, 255, 255) (unselected 0px none rgb(0, 0, 0))
Carrera Eyewear color selector photographed on its product page, 5 square swatches
photographed on carreraworld.com
Kylie Cosmetics circle / 26×26px / 4 swatches
rebuilt / chosen shown by 24px ring, 1px #ffffff
Kylie Cosmetics color selector photographed on its product page, 4 circle swatches
photographed on kyliecosmetics.com
Vogue Eyewear wide rectangle / 84×84px / 4 swatches
rebuilt / chosen shown by 1px underline, #202125 (inset shadow)
Vogue Eyewear color selector photographed on its product page, 4 wide rectangle swatches
photographed on vogue-eyewear.com
Brain Dead rounded square / 53×66px / 3 swatches
rebuilt / chosen shown by nothing marked as chosen
Brain Dead color selector photographed on its product page, 3 rounded square swatches
photographed on wearebraindead.com
Fauré Le Page circle / 24×24px / 3 swatches
rebuilt / chosen shown by 32px ring, 1px #fbba00
Fauré Le Page color selector photographed on its product page, 3 circle swatches
photographed on faurelepage.com
Filson wide rectangle / 29×17px / 3 swatches
rebuilt / chosen shown by border 1px solid rgb(0, 0, 0) (unselected 1px solid rgba(0, 0, 0, 0))
Kith wide rectangle / 84×15px / 3 swatches
rebuilt / chosen shown by text #333333 (unselected #757575)
Kith color selector photographed on its product page, 3 wide rectangle swatches
photographed on kith.com
Moynat square / 29×31px / 3 swatches
rebuilt / chosen shown by border 1px solid rgb(0, 0, 0) (unselected 0px none rgb(69, 62, 65))
Moynat color selector photographed on its product page, 3 square swatches
photographed on moynat.com
Smith Optics square / 82×82px / 3 swatches
rebuilt / chosen shown by 1.5px outline, #181818 (inset shadow)
Smith Optics color selector photographed on its product page, 3 square swatches
photographed on smithoptics.com
Viktor&Rolf Fragrance square / 14×14px / 3 swatches
rebuilt / chosen shown by 14x1px underline bar, #000000
Viktor&Rolf Fragrance color selector photographed on its product page, 3 square swatches
photographed on viktor-rolf.com
Adam Lippes square / 16×16px / 2 swatches
rebuilt / chosen shown by 14x1px underline bar, #000000
Adam Lippes color selector photographed on its product page, 2 square swatches
photographed on adamlippes.com
Agnona circle / 18×18px / 2 swatches
rebuilt / chosen shown by 51x30px block, #000000
Agnona color selector photographed on its product page, 2 circle swatches
photographed on agnona.com
Anita Ko wide rectangle / 115×48px / 2 swatches
rebuilt / chosen shown by no computed difference between chosen and unchosen
Anita Ko color selector photographed on its product page, 2 wide rectangle swatches
photographed on anitako.com
Antonio Marras rounded square / 24×24px / 2 swatches
rebuilt / chosen shown by nothing marked as chosen
Antonio Marras color selector photographed on its product page, 2 rounded square swatches
photographed on antoniomarras.com
Persol square / 76×76px / 2 swatches
rebuilt / chosen shown by 1px underline, #222223
Persol color selector photographed on its product page, 2 square swatches
photographed on persol.com
Polaroid Eyewear rounded square / 70×70px / 2 swatches
rebuilt / chosen shown by border 0px none rgb(255, 255, 255) (unselected 0px none rgb(0, 0, 0))
Polaroid Eyewear color selector photographed on its product page, 2 rounded square swatches
photographed on polaroideyewear.com