InputNumber

Le composant InputNumber permet d'afficher un champ numérique.

min, valeur minimale (au niveau HTML seulement, un contrôle est nécessaire si on souhaite valider la longueur)
max, valeur maximale (au niveau HTML seulement, un contrôle est nécessaire si on souhaite valider la longueur)
decimals, nombre de décimales autorisées (au niveau HTML seulement, un contrôle est nécessaire si on souhaite valider la longueur)

Source
Data

{
  "$schema": "../../../lunatic-schema.json",
  "components": [
    {
      "id": "kze792d8",
      "componentType": "InputNumber",
      "page": "1",
      "min": 0,
      "max": 100000,
      "decimals": 2,
      "label": {
        "value": "\"➡ 1. \" || \"Input number (between 0 and 100 000)\"",
        "type": "VTL|MD"
      },
      "description": {
        "value": "\"Description\"",
        "type": "VTL|MD"
      },
      "response": {
        "name": "NB"
      }
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "NB",
      "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>
  );
}