CheckboxGroup
Affiche une liste de case à cocher. Chaque case sera associé à une variable spécifique précisé au travers de l'option responses. Chaque réponse prendra la valeur true ou false en fonction de l'état de la case à cocher.
- Source
- Data
{
"$schema": "../../../lunatic-schema.json",
"components": [
{
"id": "checkboxbooleanGroupNumeric",
"componentType": "CheckboxGroup",
"page": "1",
"label": {
"value": "Situation matrimoniale",
"type": "TXT"
},
"orientation": "horizontal",
"hierarchy": {
"sequence": {
"id": "kmnnjaf1",
"page": "1",
"label": {
"value": "Situation matrimoniale",
"type": "Text"
}
},
"subSequence": {
"id": "kmw3dz2a",
"page": "2",
"label": {
"value": "Mois préférés de l'année",
"type": "Text"
}
}
},
"missingResponse": {
"name": "SITUMATRI_MISSING"
},
"responses": [
{
"id": "kmort6x9-QOP-kmosa98y",
"label": {
"value": "Française de naissance ou par réintégration",
"type": "Text"
},
"response": {
"name": "NATIO1N1"
}
},
{
"id": "kmort6x9-QOP-kmos360k",
"label": {
"value": "\"Française par déclaration, naturalisation, option à la majorité\"",
"type": "VTL"
},
"response": {
"name": "NATIO1N2"
}
},
{
"id": "kmort6x9-QOP-kmos37e1",
"label": {
"value": "Étrangère",
"type": "Text"
},
"response": {
"name": "NATIO1N3"
}
},
{
"id": "kmort6x9-QOP-kmorue9c",
"label": {
"value": "Apatride (pas de nationalité)",
"type": "Text"
},
"response": {
"name": "NATIO1N4"
}
}
]
},
{
"id": "checkboxbooleanGroupAlpha",
"componentType": "CheckboxGroup",
"page": "2",
"label": {
"value": "Mois préférés de l'année",
"type": "TXT"
},
"orientation": "vertical",
"hierarchy": {
"sequence": {
"id": "kmnnjaf1",
"page": "1",
"label": {
"value": "Situation matrimoniale",
"type": "Text"
}
},
"subSequence": {
"id": "kmw3dz2a",
"page": "2",
"label": {
"value": "Mois préférés de l'année",
"type": "Text"
}
}
},
"missingResponse": {
"name": "SITUMATRI_MISSING"
},
"bindingDependencies": [
"MOIS1",
"MOIS2",
"MOIS3",
"MOIS4",
"MOIS5",
"MOIS6",
"MOIS7",
"MOIS8",
"MOIS9",
"MOIS10",
"MOIS11",
"MOIS12"
],
"responses": [
{
"id": "mois1",
"label": {
"value": "Janvier",
"type": "Text"
},
"response": {
"name": "MOIS1"
}
},
{
"id": "mois2",
"label": {
"value": "Février",
"type": "Text"
},
"response": {
"name": "MOIS2"
}
},
{
"id": "mois3",
"label": {
"value": "Mars",
"type": "Text"
},
"response": {
"name": "MOIS3"
}
},
{
"id": "mois4",
"label": {
"value": "Avril",
"type": "Text"
},
"response": {
"name": "MOIS4"
}
},
{
"id": "mois5",
"label": {
"value": "Mai",
"type": "Text"
},
"response": {
"name": "MOIS5"
}
},
{
"id": "mois6",
"label": {
"value": "Juin",
"type": "Text"
},
"response": {
"name": "MOIS6"
}
},
{
"id": "mois7",
"label": {
"value": "Juillet",
"type": "Text"
},
"response": {
"name": "MOIS7"
}
},
{
"id": "mois8",
"label": {
"value": "Août",
"type": "Text"
},
"response": {
"name": "MOIS8"
}
},
{
"id": "mois9",
"label": {
"value": "Septembre",
"type": "Text"
},
"response": {
"name": "MOIS9"
}
},
{
"id": "mois10",
"label": {
"value": "Octobre",
"type": "Text"
},
"response": {
"name": "MOIS10"
}
},
{
"id": "mois11",
"label": {
"value": "Novembre",
"type": "Text"
},
"response": {
"name": "MOIS11"
}
},
{
"id": "mois12",
"label": {
"value": "Décembre",
"type": "Text"
},
"response": {
"name": "MOIS12"
}
}
]
}
],
"variables": [
{
"variableType": "COLLECTED",
"name": "NATIO1N1",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "NATIO1N2",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "NATIO1N3",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "NATIO1N4",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS1",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS2",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS3",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS4",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS5",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS6",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS7",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS8",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS9",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS10",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS11",
"values": {
"PREVIOUS": null,
"COLLECTED": null,
"FORCED": null,
"EDITED": null,
"INPUTTED": null
}
},
{
"variableType": "COLLECTED",
"name": "MOIS12",
"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>
);
}
Loading...