Lily Design System™

Espana Tarjeta Sanitaria Individual View

EspanaTarjetaSanitariaIndividualView is a read-only display of a España Tarjeta Sanitaria Individual (TSI), the unique national healthcare identifier also known as CIP-SNS (Código de Identificación Personal del Sistema Nacional de Salud). It renders the value as inline text inside a <span> with aria-label for accessibility. It is the display-only companion to EspanaTarjetaSanitariaIndividualInput.

Example

EspanaTarjetaSanitariaIndividualView
Show demo markup 
<span class="espana-tarjeta-sanitaria-individual-view" aria-label="a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier">EspanaTarjetaSanitariaIndividualView</span>
Usage example 
<EspanaTarjetaSanitariaIndividualView label="TSI" value="BBBB12345678" />
Show Svelte source 
// In your Svelte component:
import EspanaTarjetaSanitariaIndividualView from "lily-design-system-svelte-headless/components/EspanaTarjetaSanitariaIndividualView/EspanaTarjetaSanitariaIndividualView.svelte";

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

Usage

<SummaryList>
  <SummaryListItem>
    <dt>Tarjeta Sanitaria Individual</dt>
    <dd><EspanaTarjetaSanitariaIndividualView label="TSI" value="BBBB12345678" /></dd>
  </SummaryListItem>
</SummaryList>

Props

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

Keyboard Interactions

  • None (passive display-only component)

ARIA

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

When to Use

  • Use to display a Spanish TSI / CIP-SNS healthcare identifier in a formatted, read-only view.
  • Use in patient banners, summary lists, or medical records to show the TSI.
  • Use in confirmation screens after identifier entry.

When Not to Use

  • Do not use for entering identifiers -- use EspanaTarjetaSanitariaIndividualInput 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 .espana-tarjeta-sanitaria-individual-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 España Tarjeta Sanitaria Individual (TSI) uses a CIP-SNS code that typically begins with 4 digits indicating the Autonomous Community region, followed by a variable mix of alphanumeric characters. The code is printed on the front of the health card, often below the barcode. To obtain the card, España citizens use their DNI (National Identity Document) and non-España citizens use their NIE (Foreigner Identification Number). A 12-digit España Social Security Number (NUSS/NAF) is also required for registration.

Related components

  • espana-tarjeta-sanitaria-individual-input — an input for entering 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
  • eire-individual-health-identifier-input — an input for entering Eire Individual Health Identifier (IHI) unique national healthcare identifier
  • eire-individual-health-identifier-view — a read-only display of Eire Individual Health Identifier (IHI) 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

  • Ministerio de Sanidad: https://www.sanidad.gob.es/

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 EspanaTarjetaSanitariaIndividualInput for the Input/View pattern

Canonical contract

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

Metadata

  • Component: espana-tarjeta-sanitaria-individual-view
  • PascalCase: EspanaTarjetaSanitariaIndividualView
  • Description: a read-only display of an España Tarjeta Sanitaria Individual (TSI) 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: .espana-tarjeta-sanitaria-individual-view
  • Interactive: no

ARIA

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

Keyboard

  • None -- this is a passive display-only component

Props

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