All components (204)

Shipping picker

Commerce · ShippingPicker · .amset-shipping

What it is and when to use it

The shipping methods as cards to choose from: the name, when it arrives, how much it costs and, if a little more makes it free, how much is missing.

When to use it

In the shipping step of checkout. With subtotal it knows which shipments are free (the freeFrom of each method) and how much each one is missing.
The delivery time is given as a date ("Arrives on Monday, September 21"), not as "2-3 business days": it counts business days, starts the next day once the cutoffTime has passed (14:00 by default) and skips the holidays.
disabled on a method that does not apply to that order: it is shown, but cannot be chosen.

When not to

Options with no price or delivery time: RadioGroup, or SegmentedGroup if they are two or three words.
Choosing the day and time of a pickup or an appointment: SlotPicker.

Keyboard: it is a group of native radios: Tab enters through the chosen method and the arrow keys change the method, choosing as they go and skipping the disabled ones.

Accessibility: the label ("Delivery method") names the group. Each card is announced in full and with commas ("Express, €9.90, Arrives on Monday, September 21, 24h courier"), because taken out of the content it was read run together. What is free is written "Free", not "€0.00", and the chosen one changes border and background and fills its dot: not only by color.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how prices and dates are written. now fixes today's date so that the delivery time does not depend on the clock: in this sheet, Friday, September 18, 2026 at 10:00.

Fine-tuning: CSS variables --amset-shipping-*: -brand, -dot, -gap, -option-gap, -option-padding, -radius, -title. The size (size) moves the padding of each option, the gap, the circle of the radio and its dot.

What it looks like

Delivery method

StandardHome deliveryFreeUrgent€6.90

<ShippingPicker
  methods={metodos}
  value={elegido}
  onChange={setElegido}
  subtotal={148.2}
/>

Props

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

Prop	Type	What it does
`methods`required	`readonly ShippingMethod[]`	—
`onChange`required	`(key: string) => void`	—
`subtotal`required	`number`	What the cart contains, to know which shipments are free.
`value`required	`string \| null`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`currency`	`string`	—
`cutoffTime`	`number`	—
`holidays`	`readonly string[]`	Holidays in `YYYY-MM-DD`: they do not count as a delivery day.
`label`	`string`	—
`now`	`Date`	To be able to test the deadlines without depending on today's date.
`size`	`"sm" \| "md" \| "lg"`	—

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-shipping-gap`	`var(--amset-space-2)`
`--amset-shipping-option-padding`	`var(--amset-space-3) var(--amset-space-4)`
`--amset-shipping-option-gap`	`var(--amset-space-3)`
`--amset-shipping-radius`	`var(--amset-radius)`
`--amset-shipping-title`	`var(--amset-text-base)`
`--amset-shipping-brand`	`1.125rem`
`--amset-shipping-dot`	`0.5rem`

How to change it

.amset-shipping {
  --amset-shipping-gap: ...;
  --amset-shipping-option-padding: ...;
}

In the test bench

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