Lily Design System™

Espana Tarjeta Sanitaria Individual Input

EspanaTarjetaSanitariaIndividualInput is a headless input for entering a España Tarjeta Sanitaria Individual (TSI), the unique national healthcare identifier also known as CIP-SNS. It renders as <input type="text"> with autocomplete disabled to protect sensitive health data. It is the editable companion to EspanaTarjetaSanitariaIndividualView.

Example

Show demo markup 
<label class="label" for="demo-input">Label</label><input class="espana-tarjeta-sanitaria-individual-input" id="demo-input" aria-label="an input for entering an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier" />
Usage example 
<EspanaTarjetaSanitariaIndividualInput label="TSI" bind:value={tsi} />
Show Svelte source 
// In your Svelte component:
import EspanaTarjetaSanitariaIndividualInput from "lily-design-system-svelte-headless/components/EspanaTarjetaSanitariaIndividualInput/EspanaTarjetaSanitariaIndividualInput.svelte";

<EspanaTarjetaSanitariaIndividualInput label="Label" />

Usage

<Field label="Tarjeta Sanitaria Individual" required>
  <EspanaTarjetaSanitariaIndividualInput label="TSI" value={tsi} required />
  <Hint>Enter your CIP-SNS code from your health card</Hint>
  <ErrorMessage>Please enter a valid TSI 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

ARIA

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

When to Use

  • Use in clinical or administrative forms to collect a Spanish TSI / CIP-SNS healthcare identifier.
  • Use with validation for the TSI identifier format.
  • Use in patient registration workflows where the TSI is required for healthcare access in Spain.

When Not to Use

  • Do not use for displaying read-only identifiers -- use EspanaTarjetaSanitariaIndividualView 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 and autocomplete="off". The consumer provides all styling.

Styles

The consumer provides all CSS styling. The component renders with a .espana-tarjeta-sanitaria-individual-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 autocomplete="off"
  • Verify value binding works

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-view — a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
  • text-input — a single-line text input field <input type="text">

References

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

Implementation Notes

  • Renders as <input type="text"> with autocomplete="off"
  • Supports two-way binding on the value prop
  • Companion to EspanaTarjetaSanitariaIndividualView

Canonical contract

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

Metadata

  • Component: espana-tarjeta-sanitaria-individual-input
  • PascalCase: EspanaTarjetaSanitariaIndividualInput
  • Description: an input for entering 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: <input>
  • CSS class: .espana-tarjeta-sanitaria-individual-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>