Lily Design System™

Eire Individual Health Identifier View

EireIndividualHealthIdentifierView is a read-only display of an Eire Individual Health Identifier (IHI), the unique national healthcare identifier used by the Health Service Executive (HSE) to match patients with their medical records. It renders the value as inline text inside a <span> with aria-label for accessibility. It is the display-only companion to EireIndividualHealthIdentifierInput.

Implementation Notes

  • Renders a <span> with aria-label
  • Displays the value as text content
  • No formatting or validation; consumer provides the value pre-formatted
  • Companion to EireIndividualHealthIdentifierInput for the Input/View pattern

Props

  • label: string (required) -- accessible label via aria-label
  • value: string (default: "") -- the IHI string to display
  • ...restProps: any -- additional HTML attributes spread onto the <span>

Usage

<SummaryList>
  <SummaryListItem>
    <dt>Individual Health Identifier</dt>
    <dd><EireIndividualHealthIdentifierView label="IHI" value="1234567890" /></dd>
  </SummaryListItem>
</SummaryList>

Keyboard Interactions

  • None (passive display-only component)

ARIA

  • aria-label={label} -- provides accessible name for the displayed identifier

When to Use

  • Use to display an Eire Individual Health Identifier (IHI) in a formatted, read-only view.
  • Use in patient banners, summary lists, or medical records to show the IHI.
  • Use in confirmation screens after identifier entry.

When Not to Use

  • Do not use for entering identifiers -- use EireIndividualHealthIdentifierInput instead.
  • Do not use for editable display -- combine with Editable.
  • Do not use for other national identifiers -- use the corresponding country-specific view component.

Headless

This headless component provides a <span> with aria-label. The consumer provides all styling.

Styles

The consumer provides all CSS styling. The component renders with a .eire-individual-health-identifier-view class for targeting.

Testing

  • Verify renders a <span> with the correct class
  • Verify aria-label is set from the label prop
  • Verify value is displayed as text content

Domain Knowledge

The Eire Individual Health Identifier (IHI) is a 10-digit clinical identifier used by healthcare providers to safely match patients with their medical records across different hospitals and GPs. Unlike the Eire Personal Public Service Number (PPSN), the IHI contains no personal information (like birth date) and is not used for social welfare or taxes. Most patients do not need to know their IHI to access care; it is primarily used behind the scenes by the Health Service Executive (HSE).

Related components

  • eire-individual-health-identifier-input — an input for entering Eire Individual Health Identifier (IHI) unique national healthcare identifier
  • espana-tarjeta-sanitaria-individual-input — an input for entering an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
  • espana-tarjeta-sanitaria-individual-view — a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
  • france-numero-d-identification-au-repertoire-input — an input for entering a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
  • france-numero-d-identification-au-repertoire-view — a read-only display of a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
  • tuaisceart-eireann-health-and-care-number-input — an input for entering aTuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier

References

  • HSE: https://www.hse.ie/

Example

EireIndividualHealthIdentifierView
Show Svelte source 
// In your Svelte component:
import EireIndividualHealthIdentifierView from "lily-design-system-svelte-headless/components/EireIndividualHealthIdentifierView/EireIndividualHealthIdentifierView.svelte";

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

Canonical contract

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

Metadata

  • Component: eire-individual-health-identifier-view
  • PascalCase: EireIndividualHealthIdentifierView
  • Description: a read-only display of Eire Individual Health Identifier (IHI) unique national healthcare identifier
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <span>
  • CSS class: .eire-individual-health-identifier-view
  • Interactive: no

ARIA

  • aria-label -- provides the accessible name from the label prop

Keyboard

  • None -- passive display-only component

Props

  • label: string (required) -- accessible label via aria-label
  • value: string (default: "") -- the IHI string to display
  • ...restProps: any -- additional HTML attributes spread onto the <span>