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>

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" />

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" />

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>

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
• 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

• Don't pass an unformatted number to :value. The component formats with the active locale's decimal/thousand separators — passing 19.99 is correct; passing "19,99" (already formatted) double-formats.

Design Tokens