Primitive 04 / Variants

Variant picker

Fieldset of named variants with numeric weight inputs (0–100%). A live total indicator turns green when the weights sum to 100% and red otherwise, with a precise 'X off' hint. Each row also displays a tone-coded dot for visual differentiation.

Production answer

Variant picker is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Variant picker states
Generative search brief

Variant picker: Fieldset of named variants with numeric weight inputs (0–100%). A live total indicator turns green when the weights sum to 100% and red otherwise, with a precise 'X off' hint. Each row also displays a tone-coded dot for visual differentiation.

Live primitive · type weights · totals update
quote-instant-pricing variants
  • ControlSave-then-price (current behaviour).
  • Live previewRecalculate on each line edit.
Total weight100%Sums to 100%
parts-3d-viewer variants
  • FlatExisting image carousel.
  • 3D viewerGLB-backed WebGL viewer.
  • AR overlayPhone camera + WebXR overlay.
Total weight100%Sums to 100%