Lily Design System™

Eire Individual Health Identifier Input

EireIndividualHealthIdentifierInput is a headless input for entering an Eire Individual Health Identifier (IHI), the unique national healthcare identifier used by the HSE. It renders as <input type="text"> with a 10-digit pattern, numeric keyboard hint, and autocomplete disabled. It is the editable companion to EireIndividualHealthIdentifierView.

Example

Show demo markup 
<label class="label" for="demo-input">Label</label><input class="eire-individual-health-identifier-input" id="demo-input" aria-label="an input for entering Eire Individual Health Identifier (IHI) unique national healthcare identifier" />
Usage example 
<script lang="ts">
    import EireIndividualHealthIdentifierInput from "./EireIndividualHealthIdentifierInput.svelte";
    let ihi = $state("");
</script>

<EireIndividualHealthIdentifierInput label="IHI" bind:value={ihi} />
Show Svelte source 
// In your Svelte component:
import EireIndividualHealthIdentifierInput from "lily-design-system-svelte-headless/components/EireIndividualHealthIdentifierInput/EireIndividualHealthIdentifierInput.svelte";

<EireIndividualHealthIdentifierInput label="Label" />

Usage

<Field label="Individual Health Identifier" required>
  <EireIndividualHealthIdentifierInput label="IHI" value={ihi} required />
  <Hint>Enter the 10-digit IHI from your HSE records</Hint>
  <ErrorMessage>Please enter a valid 10-digit IHI</ErrorMessage>
</Field>

Props

  • label: string (required) -- accessible label via aria-label
  • value: string (default: "") -- bindable input value
  • required: boolean (default: false) -- form validation
  • disabled: boolean (default: false) -- disabled state
  • ...restProps: any -- additional HTML attributes spread onto the <input>

Keyboard Interactions

  • Standard text input keyboard behavior
  • Users type 10 digits

ARIA

  • aria-label={label} -- provides accessible name

When to Use

  • Use in clinical or administrative forms to collect an Eire Individual Health Identifier (IHI).
  • Use with validation for the 10-digit IHI format.
  • Use in patient registration workflows where the IHI is required by HSE systems.

When Not to Use

  • Do not use for displaying read-only identifiers -- use EireIndividualHealthIdentifierView instead.
  • Do not use for general text input -- use TextInput instead.
  • Do not use for other national identifiers -- use the corresponding country-specific input component.

Headless

This headless component provides a bare <input type="text"> with aria-label, pattern, inputmode="numeric", and autocomplete="off". The consumer provides all styling.

Styles

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

Testing

  • Verify renders an <input> with the correct class and type="text"
  • Verify aria-label is set from the label prop
  • Verify pattern [0-9]{10}, inputmode="numeric", autocomplete="off"
  • Verify value binding works

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 and is not used for social welfare or taxes. It is primarily used behind the scenes by the Health Service Executive (HSE).

Related components

  • eire-individual-health-identifier-view — a read-only display of Eire Individual Health Identifier (IHI) unique national healthcare identifier
  • text-input — a single-line text input field <input type="text">

References

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

Implementation Notes

  • Renders as <input type="text"> with pattern [0-9]{10}
  • inputmode="numeric" for mobile numeric keyboard
  • autocomplete="off" to protect sensitive health identifiers
  • Supports two-way binding on the value prop
  • Companion to EireIndividualHealthIdentifierView

Canonical contract

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

Metadata

  • Component: eire-individual-health-identifier-input
  • PascalCase: EireIndividualHealthIdentifierInput
  • Description: an input for entering 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: <input>
  • CSS class: .eire-individual-health-identifier-input
  • Interactive: yes

ARIA

  • aria-label provides accessible name from label prop
  • required and disabled states conveyed to assistive technology

Keyboard

  • Standard text input keyboard behavior

Props

  • label: string (required) -- accessible label via aria-label
  • value: string (default: "") -- bindable input value
  • required: boolean (default: false) -- form validation
  • disabled: boolean (default: false) -- disabled state
  • ...restProps: Any additional HTML attributes spread onto the <input>

Markdown

This page as Markdown, for people and AI tools: eire-individual-health-identifier-input.md