All components (204)

Size guide

Commerce · SizeGuide · .amset-sizes

What it is and when to use it

The size table of a garment or a piece of jewelry, with the switch to inches and the size that fits according to the measurement entered.

When to use it

On the product page, in view or inside the Dialog or the Drawer that "Size guide" opens.
keyMeasure decides which measurement the recommendation is based on; by default, the first column.
If the measurement falls between two sizes it recommends the larger one and says so ("You are between S and M: we recommend M"); if it falls outside the guide, it says that too, without making up a size.
withInches={false} when inches are irrelevant.

When not to

Choosing the size to buy: VariantPicker, which also knows what is sold out.
A data table that is sorted or filtered: Table.

Keyboard: Tab goes through the measurement field, the unit switch (the arrows choose between cm and inches) and the table, which is focused so it can be scrolled when it does not fit. The recommendation appears when leaving the field or pressing Enter, with the measurement exactly as typed: "90.2" is not rounded to 90 (the field has no step; the arrows go up and down by one).

Accessibility: it is a real table, with caption (the label, required), column headers (the measurements) and row headers (the sizes): you hear "M, Chest, 92–96 cm". The recommendation goes in a role="status" and the row of the recommended size says "Your size" in writing, not only in color. When switching to inches, what was typed is converted instead of being lost.

Context: it goes inside LocaleProvider (or AmsetProvider), which sets the decimal separator. Measurements are always given in centimeters. The sizes appear in the table in the order they are given, but to recommend they are compared by their measurements, so the order does not matter: when the measurement falls within none, the first one that starts above it is recommended.

Fine-tuning: CSS variables --amset-sizes-*: -font, -gap, -radius, -tip-padding. The size (size) changes the gap, the padding of the recommendation and the font size of the table.

What it looks like

Your chest measurement (cm)

cmpulgadas

Enter your chest measurement and we will tell you your size.

Size guide
Size	Chest	Waist
S	86–92 cm	70–76 cm
M	92–100 cm	76–84 cm

<SizeGuide
  label="Size guide"
  measures={[{ key: 'pecho', name: 'Chest' }]}
  sizes={[{ key: 's', name: 'S', measures: { pecho: { min: 86, max: 92 } } }]}
/>

Props

Import it with import { SizeGuide } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What the guide is for. Required: it is the table's title.
`measures`required	`readonly GuideMeasure[]`	—
`sizes`required	`readonly GuideSize[]`	The sizes, in the order they appear in the table. To recommend, they do not need to come from smallest to largest: they are compared by their measurements.
`className`	`string`	Merged with the library classes; it does not replace them.
`keyMeasure`	`string`	Which measure is asked for in order to recommend. By default, the first.
`size`	`"sm" \| "md" \| "lg"`	—
`withInches`	`boolean`	Allows switching to inches. For rings or sizes in mm, better without.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-sizes-gap`	`var(--amset-space-3)`
`--amset-sizes-radius`	`var(--amset-radius)`
`--amset-sizes-tip-padding`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-sizes-font`	`var(--amset-text-sm)`

How to change it

.amset-sizes {
  --amset-sizes-gap: ...;
  --amset-sizes-radius: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: