Lily Design System™

France Numero D Identification Au Repertoire View

FranceNumeroDIdentificationAuRepertoireView is a read-only display of a France numéro d'identification au répertoire (NIR), the unique national healthcare identifier. It renders the value as inline text inside a <span> with aria-label for accessibility. It is the display-only companion to FranceNumeroDIdentificationAuRepertoireInput.

The NIR (also known as the Social Security number) is a 15-digit number printed on the Carte Vitale. It consists of a 13-digit base (sex, birth year, birth month, department, commune, order number) and a 2-digit control key.

Example

FranceNumeroDIdentificationAuRepertoireView
Show demo markup 
<span class="france-numero-d-identification-au-repertoire-view" aria-label="a read-only display of a France numéro d'identification au répertoire (NIR) unique national healthcare identifier">FranceNumeroDIdentificationAuRepertoireView</span>
Usage example 
<script lang="ts">
    import FranceNumeroDIdentificationAuRepertoireView from "./FranceNumeroDIdentificationAuRepertoireView.svelte";
</script>

<FranceNumeroDIdentificationAuRepertoireView
    label="Numéro de sécurité sociale"
    value="1 85 05 75 012 345 67"
/>
Show Svelte source 
// In your Svelte component:
import FranceNumeroDIdentificationAuRepertoireView from "lily-design-system-svelte-headless/components/FranceNumeroDIdentificationAuRepertoireView/FranceNumeroDIdentificationAuRepertoireView.svelte";

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

Usage

<SummaryList>
  <SummaryListItem>
    <dt>Numéro de Sécurité Sociale</dt>
    <dd><FranceNumeroDIdentificationAuRepertoireView label="NIR" value="1 85 05 75 012 345 67" /></dd>
  </SummaryListItem>
</SummaryList>

Props

  • label: string (required) -- accessible label via aria-label
  • value: string (default: "") -- the NIR 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 number

When to Use

  • Use to display a French NIR / Social Security number in a formatted, read-only view.
  • Use in patient banners, summary lists, or medical records to show the NIR.
  • Use in confirmation screens after identifier entry.

When Not to Use

  • Do not use for entering identifiers -- use FranceNumeroDIdentificationAuRepertoireInput 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 .france-numero-d-identification-au-repertoire-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
  • Verify pass-through attributes are applied

Domain Knowledge

The French NIR (Numéro d'Inscription au Répertoire) is structured as 15 digits: position 1 is sex (1=male, 2=female), positions 2-3 are birth year, 4-5 birth month, 6-7 department code, 8-10 commune INSEE code, 11-13 order number, 14-15 control key (checksum 01-97). For people born abroad, the department code is 99 and the commune code is replaced by a 3-digit country code. Temporary numbers begin with 7 (male) or 8 (female).

Related components

  • 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
  • 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
  • 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

  • Ameli.fr: https://www.ameli.fr/assure/droits-demarches/principes/numero-securite-sociale

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 FranceNumeroDIdentificationAuRepertoireInput 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: france-numero-d-identification-au-repertoire-view
  • PascalCase: FranceNumeroDIdentificationAuRepertoireView
  • Description: a read-only display of a France numéro d'identification au répertoire (NIR) 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: .france-numero-d-identification-au-repertoire-view
  • Interactive: no

ARIA

  • aria-label -- provides the accessible name from the label prop so screen readers can announce the purpose of the displayed number

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 NIR string to display
  • ...restProps: any -- additional HTML attributes spread onto the <span> element