Input

Le composant Input permet d'afficher un simple champ texte.

maxLength, permet de définir la longueur maximale du texte (au niveau HTML seulement, un contrôle est nécessaire si on souhaite valider la longueur)

Source
Data

{
  "components": [
    {
      "componentType": "Input",
      "label": {
        "value": "\"Nom de l'occupant principal.\"",
        "type": "VTL|MD"
      },
      "maxLength": 30,
      "id": "surname",
      "description": {
        "value": "\"For example, Bob.\"",
        "type": "VTL|MD"
      },
      "response": {
        "name": "NOM"
      },
      "page": "1"
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "NOM",
      "componentRef": "name",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": null,
        "FORCED": null,
        "EDITED": null,
        "INPUTTED": null
      }
    }
  ]
}

{}

Code
Rendu

import {
  type LunaticData,
  type LunaticSource,
  useLunatic,
  LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'

type Props = {
  source: LunaticSource;
  data: LunaticData;
};

export function FormRenderer({ source, data }: Props) {
  const { getComponents, Provider } = useLunatic(source, data, {
    initialPage: '1',
  });
  return (
    <Provider>
      <LunaticComponents components={getComponents()} />
    </Provider>
  );
}