Layouts Overview

Layout decides how the option list behaves before any styling polish is applied. Start with the layout that matches the number of options and the amount of space your product form can spare.

Wrap

The safest default. Swatches flow onto new lines naturally and handle mixed option counts well.

Grid

Best when you want clean columns and evenly aligned rows.

Scroll

Keeps the selector to one row and exposes a width control so the swatch strip can scroll horizontally.

Pill

Works well for short text options that should read like one segmented control.

Slider

A more guided single-selection presentation. Use it only when that tighter interaction suits the attribute.

Layout affects which follow-up controls are available. Wrap, Grid, Scroll, and Pill can use selector styles such as Underline and Outline, while Slider behaves as its own layout. Shape and width settings also depend on the active layout.

Use Wrap when the option count varies. Use Grid when you want tighter alignment. Use Scroll when vertical space is limited and a horizontal strip is acceptable. Use Pill for short text choices. Use Slider only when the guided interaction is clearly better than a full list of options.