## Size Picker (S—136)

Product size chips with sold-out sizes struck through, a low-stock note and a Notify me option for sold-out picks.

- URL: https://sundaeui.dev/components/size-picker
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/size-picker.json`
- Tags: size, chips, stock, product, variant, e-commerce

Sizes are radio chips. Sold-out sizes stay visible but struck through; choosing one swaps the add button for “Notify me when it’s back”. Low stock shows a quiet “Only 2 left”.
A size guide link sits beside the label, where people look for it.

### Usage

```tsx
import { SizePicker } from '@/components/sundae/size-picker'

<SizePicker />
```

### Props

- `sizes` (`{ label: string; stock: number }[]`, required): Sizes and stock.
- `onAdd` (`(size: string) => void`): Add to bag.
- `onNotify` (`(size: string) => void`): Back-in-stock request.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Apparel and footwear product pages.

### When not to use

- Products with dozens of variants: use a select.

### Accessibility

- A radiogroup; sold-out sizes remain selectable but are labelled “sold out”.
- Stock notes are announced politely when the size changes.
- Reduced motion removes the movement and keeps every state change.