ShippingMethodSelector
Radio-style selector for choosing between delivery methods with price and timing context.
Best for
Import
import { ShippingMethodSelector } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use ShippingMethodSelector during checkout when the customer needs to choose one delivery method and understand the price or delivery-speed tradeoff.
Composition notes
Pass a methods array with price and optional estimatedDays, then keep the selected method in parent state. currency, locale, and labels.freeShipping help the selector align with the rest of the checkout language.
Behavior and theming guidance
Keep the options practical and easy to compare. This surface should help the customer choose quickly, not decode shipping jargon.
Examples
Live examples you can edit directly in the sandbox.
Delivery options
Use the selector when the customer should compare shipping speed, pricing, and optional descriptions before continuing.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| methods | ShippingMethod[] | — | No description yet. |
| selected | string | — | No description yet. |
| onSelect | (methodId: string) => void | — | No description yet. |
| currency | string | SEK | No description yet. |
| locale | string | — | No description yet. |
| legend | string | — | Accessible legend for the fieldset |
| className | string | — | No description yet. |
| labels | string | {} | No description yet. |