Todos los componentes (204)

Selector de envío

Comercio · ShippingPicker · .amset-shipping

Qué es y cuándo usarlo

Los métodos de envío como tarjetas para elegir uno: el nombre, cuándo llega, cuánto cuesta y, si con un poco más sale gratis, cuánto falta.

Cuándo usarlo

En el paso de envío del pago. Con subtotal sabe qué envíos salen gratis (el freeFrom de cada método) y cuánto le falta a cada uno.
El plazo se da en fecha («Llega el lunes 21»), no en «2-3 días laborables»: cuenta días laborables, empieza al día siguiente pasada la cutoffTime (las 14 por defecto) y se salta los holidays.
disabled en un método que no vale para ese pedido: se ve, pero no se elige.

Cuándo no

Opciones sin precio ni plazo: RadioGroup, o SegmentedGroup si son dos o tres palabras.
Elegir el día y la hora de una recogida o de una cita: SlotPicker.

Teclado: es un grupo de radios nativos: Tab entra por el método elegido y las flechas cambian de método eligiendo y se saltan los deshabilitados.

Accesibilidad: el label («Forma de envío») nombra el grupo. Cada tarjeta se anuncia entera y con comas («Urgente, 9,90 €, Llega el lunes 21, Mensajería 24 h»), porque sacado del contenido se leía pegado. Lo gratis se escribe «Gratis», no «0,00 €», y la elegida cambia de borde y de fondo y rellena su punto: no solo de color.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben precios y fechas. now fija el día de hoy para que el plazo no dependa del reloj: en esta ficha, el viernes 18 de septiembre de 2026 a las 10:00.

Aspecto fino: variables CSS --amset-shipping-*: -brand, -dot, -gap, -option-gap, -option-padding, -radius, -title. El tamaño (size) mueve el relleno de cada opción, el hueco, el círculo del radio y su punto.

Cómo se ve

Forma de envío

EstandarA domicilioGratisUrgente6,90 €

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

Props

Se importa con import { ShippingPicker } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`methods`obligatoria	`readonly ShippingMethod[]`	—
`onChange`obligatoria	`(key: string) => void`	—
`subtotal`obligatoria	`number`	Lo que lleva el carrito, para saber que envios salen gratis.
`value`obligatoria	`string \| null`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`currency`	`string`	—
`cutoffTime`	`number`	—
`holidays`	`readonly string[]`	Festivos en `AAAA-MM-DD`: no cuentan como dia de reparto.
`label`	`string`	—
`now`	`Date`	Para poder probar los plazos sin depender del dia de hoy.
`size`	`"sm" \| "md" \| "lg"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--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`

Cómo se cambia

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

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: