Wrap

Flex-wrap row: chips and labels flow left-to-right, then the next line.

A lotusui extension (Chakra Wrap / CSS flex-wrap). Lives beside Stack in source (lotusui add stack). Measures each child at its intrinsic width so labels never squeeze into one-character columns the way HStack can under a narrow Max.X. Prefer SimpleGrid when you want equal cells and a fixed column count. See the Responsive guide for how Wrap fits the full toolkit.

Installation

Use the module import (the default), or own the source: lotusui add vendors the component into your app and lotusui update keeps the copy mergeable — see Registry.

go get github.com/ikaito-com/lotusui

# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add stack

Usage

Same gap between items and between lines. Cross-axis align is per line (layout.Middle for chips and icons). A child wider than Max.X alone is laid out at Max.X. The live demo uses the box width — narrow or widen the browser and the chips reflow onto more or fewer lines.

open demo ↗

lotusui.Wrap(th.Space.SM, layout.Middle,
	chip("Design"), chip("Engineering"), chip("Product"),
	chip("Marketing"), chip("Sales"), chip("Support"),
	// …)

Versus HStack

HStack never wraps — under a narrow Max.X, Rigid children are squeezed. Wrap measures intrinsic widths and starts a new line.

// Prefer Wrap for flowing badges/chips:
lotusui.Wrap(th.Space.SM, layout.Middle, chips...)
// Prefer HStack for a single non-wrapping row (switch + label):
lotusui.HStack(th.Space.SM, switchW, label)

API

Option	Type	Description
`Wrap(gap, align, children...)`	`unit.Dp, Alignment`	Flex-wrap row; intrinsic widths; same gap for items and lines.