Price

A locale-aware price display component for e-commerce and SaaS interfaces. Supports currency formatting, strike-through compare-at prices (RRP / UVP / MSRP), unit prices (Grundpreis) for EU price-marking compliance, delta indicators, and size variants.

Basic Usage

<x-wirekit::price :amount="29.99" currency="USD" />

Compare-At Price (RRP / UVP / MSRP)

Show the previous or recommended retail price as a strike-through alongside the current price. The strike-through value answers the question "what was this before?":

• RRP — Recommended Retail Price (UK)
• UVP — Unverbindliche Preisempfehlung (Germany)
• MSRP — Manufacturer's Suggested Retail Price (US)

The base prop carries this comparison value. It does not mean "base price" in the unit-price sense — see Unit Price (Grundpreis) below for that.

<x-wirekit::row gap="lg">
    <x-wirekit::price :amount="19.99" :base="29.99" currency="USD" />
    <x-wirekit::price :amount="49" :base="79" currency="EUR" />
</x-wirekit::row>

From Price

A product whose variants cost different amounts shows the lowest of them, and without a word that amount reads as the price of the product. from writes "from" before the amount, in the application's language: "from €19.99", and "ab 19,99 €" on a German page. It is visible text, and a screen reader reads it with the amount. Beside a compare-at price the struck amount comes first, so the pair reads "Previous price €24.99, from €19.99".

<x-wirekit::price :amount="19.99" :base="24.99" from currency="EUR" />

Unit Price (Grundpreis)

For pre-packaged goods sold by weight, volume, length, or area, EU and UK price-marking law requires the per-unit price to be displayed alongside the selling price. In Germany this is the Grundpreis per PAngV § 4; in the UK it is the unit price per the Price Marking Order 2004; the EU baseline is Directive 98/6/EC.

Pass unitPrice (numeric, same currency as amount) and unitMeasure (the reference unit label) — the component renders them as (€8.99 / L) next to the main price, in the same currency, in the same field of vision.

<x-wirekit::price :amount="4.49" :unit-price="8.98" unit-measure="L" currency="EUR" />

<x-wirekit::price :amount="12.99" :unit-price="51.96" unit-measure="kg" currency="EUR" />

<x-wirekit::price :amount="3.49" :base="4.99" :unit-price="6.98" unit-measure="L" currency="EUR" />

More Decimals Than the Currency

A price per piece can be smaller than the currency's smallest unit: a screw at 0.045 € each, a price list kept to four decimals. max-precision shows up to that many decimals, never fewer than the currency's own, and drops trailing zeros back to them. The previous price and the unit price beside the amount take the same digits.

<x-wirekit::stack gap="sm">
    <x-wirekit::price :amount="0.045" currency="EUR" locale="de" :max-precision="4" />
    <x-wirekit::price :amount="0.0475" currency="EUR" locale="de" :max-precision="4" />
    <x-wirekit::price :amount="12.5" currency="EUR" locale="de" :max-precision="4" />
</x-wirekit::stack>

A currency without minor units, such as the yen, shows decimals only where the amount has some. Without the prop a price shows its currency's digits.

Every amount is rounded half away from zero, the way a till and an invoice round: 0.125 in euros reads 0,13 € and -0.125 reads -0,13 €.

Delta Indicator

Attach a percentage or absolute change indicator:

<x-wirekit::row gap="lg">
    <x-wirekit::price :amount="24.99" currency="USD" :delta="-20" />
    <x-wirekit::price :amount="34.99" currency="USD" :delta="10" />
</x-wirekit::row>

<x-wirekit::price :amount="120" currency="USD" :delta="-30" delta-format="absolute" />

The delta is written the way the active locale writes numbers, like the amount beside it: -12,5 % in German and -12.5% in English. An absolute delta is a plain number in the same notation, without a currency.

Size Variants

<x-wirekit::stack gap="md">
    <x-wirekit::price :amount="9.99" currency="USD" size="xs" />
    <x-wirekit::price :amount="9.99" currency="USD" size="sm" />
    <x-wirekit::price :amount="9.99" currency="USD" size="md" />
    <x-wirekit::price :amount="9.99" currency="USD" size="lg" />
    <x-wirekit::price :amount="9.99" currency="USD" size="xl" />
</x-wirekit::stack>

Fitting a Narrow Column

A long amount in a narrow column, a cart's total or a price in a currency with many digits, can shrink to fit its line with fit instead of breaking or running out. The struck price, the word "from" and the amount shrink together and keep one size; the change, the suffix and the unit price beside them keep theirs. fit alone uses the --text-wk-fit-floor token, three quarters of the price's size, and a length such as fit="0.5rem" sets a floor of its own. Below the floor the price runs past its column rather than break. How the fitting works and what it costs is on the Fit Text page.

<x-wirekit::price :amount="1234567.89" currency="EUR" size="lg" fit="0.5rem" />

Minor Units (Cents)

Pass amounts in minor units (cents) and let the component convert:

<x-wirekit::price :amount="2999" currency="USD" :minor-units="true" />

With Suffix Slot

Add recurring interval text or other context:

<x-wirekit::price :amount="12" currency="USD" size="lg">
    <x-slot:suffix>/ month</x-slot:suffix>
</x-wirekit::price>

Full Sale Example

<x-wirekit::price :amount="49.99" :base="79.99" currency="USD" :delta="-38" size="lg">
    <x-slot:suffix>/ year</x-slot:suffix>
</x-wirekit::price>

Props

Slots

Accessibility

• Every part is read from the content itself — the root <span> carries no aria-label. ARIA prohibits aria-label on an element with no role, so a name placed there is not required to reach assistive technology at all
• Strike-through compare-at price uses <del> element for semantic meaning, prefixed with a visually-hidden "Previous price" — <del> maps to role="deletion", which screen readers do not announce by default, so without the prefix the two amounts read as unrelated
• <bdi> wraps formatted values for correct RTL rendering
• The word from writes is visible text before the amount, read with it, not a label on the wrapper
• Unit price is read out like any other visible text; it is deliberately not aria-hidden, because it is the figure EU / UK price-marking law requires the reader to get

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Pitfalls

• Pass the raw number, never an already-formatted string. Pass :amount="19.99", and the component formats it with the active locale's decimal and thousand separators. A string that is no number, "19,99" with a decimal comma, "1.234,56" or a word such as "on request", is refused while you develop, and in production the price is left out rather than shown as a wrong amount, since PHP would read "19,99" as 19 and a word as 0. A refused base, unitPrice or delta leaves out only itself. One spelling cannot be caught: "1.234", a thousand in German writing, is a number to PHP and reads as 1.234. Convert a localized figure to a number before you pass it.
• No amount draws no price, and a zero draws 0.00. null or an empty string, a price on request for example, renders nothing rather than a 0 nobody gave, and it is not reported, because a catalog has such products. Pass 0 for something that is free.
• Without PHP's intl extension, an amount carries the currency code instead of a symbol. WireKit does not require the extension. Without it, the amount is written with English separators and the ISO code after it, 1,234.56 EUR, and the delta the same way, because the symbols, where they go and each language's separators come from the extension. Install intl to render 1.234,56 € in German.

Design Tokens