Radio

Permet de sélectionner une valeur parmi une liste d'option

options, liste des options sélectionnables
- value, valeur a associé à la réponse
- label, libellé de l'option (expression VTL)
- description, libellé de l'option (expression VTL)

Source
Data

{
  "components": [
    {
      "id": "radio",
      "componentType": "Radio",
      "mandatory": false,
      "page": "3",
      "label": {
        "value": "\"Label for a Radio component\"",
        "type": "VTL|MD"
      },
      "description": {
        "value": "\"Description of a Radio component\"",
        "type": "VTL|MD"
      },
      "conditionFilter": {
        "value": "true",
        "type": "VTL"
      },
      "options": [
        {
          "value": "1",
          "description": {
            "value": "\"Déclaration oui\"",
            "type": "VTL|MD"
          },
          "label": {
            "value": "\"oui\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "2",
          "description": {
            "value": "\"Déclaration non\"",
            "type": "VTL|MD"
          },
          "label": {
            "value": "\"non\"",
            "type": "VTL|MD"
          }
        }
      ],
      "response": {
        "name": "Q2"
      }
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "Q2",
      "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>
  );
}