EC・商品
サイズ選択
S/M/L/XL のピルをタップしてサイズを選ぶ。品切れは取り消し線で無効化。未選択でカートを押すと選択を促すシェイクと案内が出る。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="sz-wrap">
<p class="sz-heading">サイズ</p>
<div class="sz-list" role="listbox" aria-label="サイズ選択" id="szList">
<button class="sz-pill" data-size="S" role="option" aria-selected="false">S</button>
<button class="sz-pill" data-size="M" role="option" aria-selected="false">M</button>
<button class="sz-pill" data-size="L" role="option" aria-selected="false">L</button>
<button class="sz-pill sz-sold" data-size="XL" role="option" aria-selected="false" disabled aria-disabled="true">XL</button>
</div>
<p class="sz-hint" id="szHint" aria-live="polite"></p>
<button class="sz-cart-btn" id="szCartBtn">カートに入れる</button>
</div>