Lily Design System™

Postal Code View

A postal code view displays a postal or ZIP code as read-only text within a <span> element. It is used to present postal code information in address displays, confirmation pages, shipping summaries, or any context where the value is not editable.

This component pairs with PostalCodeInput to form an Input/View pattern: PostalCodeInput handles data entry while PostalCodeView handles display. The simple span-based rendering allows consumers to apply any formatting or styling needed.

Example

SW1A 1AA
Show demo markup 
<span class="postal-code-view">SW1A 1AA</span>
Usage example 
<script lang="ts">
  import PostalCodeView from './PostalCodeView.svelte';
</script>

<PostalCodeView text="90210" />
Show Svelte source 
// In your Svelte component:
import PostalCodeView from "lily-design-system-svelte-headless/components/PostalCodeView/PostalCodeView.svelte";

<PostalCodeView label="Label" value="Sample value" />

Usage

US ZIP code display:

<PostalCodeView text="90210" />

UK postcode display:

<PostalCodeView text="SW1A 1AA" />

Postal code inline in an address summary:

<p>Your postal code: <PostalCodeView text={postalCode} /></p>

Address confirmation with postal code view:

<SummaryList>
  <SummaryListItem>
    <dt>Street</dt>
    <dd>10 Downing Street</dd>
  </SummaryListItem>
  <SummaryListItem>
    <dt>City</dt>
    <dd>London</dd>
  </SummaryListItem>
  <SummaryListItem>
    <dt>Postcode</dt>
    <dd><PostalCodeView text="SW1A 2AA" /></dd>
  </SummaryListItem>
</SummaryList>

Props

  • text: string (default: "") -- the postal code string to display
  • ...restProps: any additional HTML attributes spread onto the <span> element

Keyboard Interactions

None -- this component is a passive display element with no interactive behavior.

ARIA

No ARIA attributes are needed. The <span> renders inline text content that is natively accessible to screen readers.

When to Use

  • Use to display a postal or ZIP code in read-only contexts such as address summaries, confirmation pages, and shipping details.
  • Use when the postal code should be visible but not editable.
  • Use in order confirmations, delivery tracking pages, or patient address displays.

When Not to Use

  • Do not use when the user needs to edit the postal code -- use PostalCodeInput instead.
  • Do not use for general text display -- use a plain <span> element instead.

Headless

The PostalCodeView headless component provides a <span> element that renders postal code text content. It requires no ARIA attributes since inline text is natively accessible. The consumer provides all visual styling, formatting, and layout.

Styles

The consumer provides all CSS styling. The component renders with a .postal-code-view class for targeting. No default styles are included — this is a fully headless component.

Testing

  • Verify the component renders a <div> element with class postal-code-view
  • Verify pass-through attributes are applied

Advice

  • Designers: Ensure the postal code is visually distinct within address blocks, using consistent typography and spacing with surrounding address fields.
  • Developers: Format the postal code text appropriately for the target locale before passing it to the text prop (e.g., adding spaces in UK postcodes).

Implementation Notes

  • Renders a <span> element containing the postal code text
  • Text content is provided via the text prop (not via children)
  • Defaults to an empty string if no text is provided
  • Spreads restProps on the <span> for consumer customization (e.g., class, data-* attributes)
  • No ARIA attributes needed; the text content is directly readable by assistive technology

Composition

PostalCodeView is the read-only counterpart of PostalCodeInput. Use PostalCodeInput for data entry and PostalCodeView for displaying the saved postal code value.

Related components

  • postal-code-input — an input for entering a postal or ZIP code

References

  • MDN span element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: postal-code-view
  • PascalCase: PostalCodeView
  • Description: a read-only display of a postal or ZIP code
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .postal-code-view
  • Interactive: no

ARIA

  • Renders a <span> that displays the postal/ZIP code as text content
  • No specific ARIA needed — the visible text provides the accessible name
  • Consumers may add aria-label for additional context (e.g. "Postal code: SW1A 1AA")

Keyboard

  • No keyboard interactions — this is a passive element

Props

  • text: string (default: "") -- the postal code string to display
  • ...restProps: any additional HTML attributes spread onto the <span> element