Lily Design System™

Tuaisceart Eireann Health And Care Number Input

TuaisceartEireannHealthAndCareNumberInput is a headless input for entering a Tuaisceart Eireann Health and Care (H&C) Number, the unique national healthcare identifier used by HSC Tuaisceart Eireann. It renders as <input type="text"> with a 3-3-4 digit pattern, numeric keyboard hint, and autocomplete disabled. It is the editable companion to TuaisceartEireannHealthAndCareNumberView.

Example

Show demo markup 
<label class="label" for="demo-input">Label</label><input class="tuaisceart-eireann-health-and-care-number-input" id="demo-input" aria-label="an input for entering aTuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier" />
Usage example 
<script lang="ts">
  import TuaisceartEireannHealthAndCareNumberInput from './TuaisceartEireannHealthAndCareNumberInput.svelte';

  let hc = $state("");
</script>

<TuaisceartEireannHealthAndCareNumberInput label="H&C Number" bind:value={hc} />
Show Svelte source 
// In your Svelte component:
import TuaisceartEireannHealthAndCareNumberInput from "lily-design-system-svelte-headless/components/TuaisceartEireannHealthAndCareNumberInput/TuaisceartEireannHealthAndCareNumberInput.svelte";

<TuaisceartEireannHealthAndCareNumberInput label="Label" />

Usage

<Field label="Health and Care Number" required>
  <TuaisceartEireannHealthAndCareNumberInput label="H&C Number" value={hcNumber} required />
  <Hint>Format: XXX XXX XXXX (10 digits from your H&C card)</Hint>
  <ErrorMessage>Please enter a valid H&C Number</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 digits and spaces in XXX XXX XXXX format

ARIA

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

When to Use

  • Use in clinical or administrative forms to collect a Tuaisceart Eireann Health and Care (H&C) Number.
  • Use with validation for the 10-digit H&C Number format (XXX XXX XXXX).
  • Use in patient registration workflows where the H&C Number is required by HSC Tuaisceart Eireann.

When Not to Use

  • Do not use for displaying read-only identifiers -- use TuaisceartEireannHealthAndCareNumberView instead.
  • Do not use for general text input -- use TextInput instead.
  • Do not use for UK NHS numbers -- use UnitedKingdomNationalHealthServiceNumberInput instead.

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 .tuaisceart-eireann-health-and-care-number-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]{3} [0-9]{3} [0-9]{4}, inputmode="numeric", autocomplete="off"
  • Verify value binding works

Domain Knowledge

The Tuaisceart Eireann Health and Care (H&C) Number is a 10-digit numeric identifier, often displayed in a 3-3-4 format (e.g. 320 000 0001). The first two digits are always between 32 and 39. It is the unique patient identifier used by Health and Social Care (HSC) services in Tuaisceart Eireann.

Related components

  • tuaisceart-eireann-health-and-care-number-view — a read-only display of Tuaisceart Eireann Health and Care (H&C) Number unique national healthcare identifier
  • text-input — a single-line text input field <input type="text">

References

  • HSC NI: https://online.hscni.net/

Implementation Notes

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

Canonical contract

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

Metadata

  • Component: tuaisceart-eireann-health-and-care-number-input
  • PascalCase: TuaisceartEireannHealthAndCareNumberInput
  • Description: an input for entering aTuaisceart Eireann Health and Care (H&C) Number 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: .tuaisceart-eireann-health-and-care-number-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
  • Users type digits and spaces in format XXX XXX XXXX

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: tuaisceart-eireann-health-and-care-number-input.md