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.

Flow

Adds a perspective presentation with its own justify, align, and separate row and column gap controls for precise alignment.

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, Flow, and Pill can use any selector style — Underline, Outline, or Background — while Slider behaves as its own layout and has no separate selector style. Shape and width settings also depend on the active layout: Pill draws one continuous segmented control, so it has no shape picker.

Use Wrap when the option count varies. Use Grid when you want tighter alignment. Use Flow when you want to control justification and row and column spacing independently. Use Pill for short text choices. Use Slider only when the guided interaction is clearly better than a full list of options.