Dropdown

Le composant permet de générer un menu déroulant.

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

Voir le type

Source

{
  "maxPage": "1",
  "components": [
    {
      "id": "j4nw5cqz",
      "componentType": "Dropdown",
      "mandatory": false,
      "page": "1",
      "label": {
        "value": "\"In which state do The Simpsons reside?\"",
        "type": "VTL|MD"
      },
      "response": {
        "name": "STATE"
      },
      "options": [
        {
          "value": "1",
          "label": {
            "value": "\"Washington\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "2",
          "label": {
            "value": "\"Kentucky\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "3",
          "label": {
            "value": "\"Ohio\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "4",
          "label": {
            "value": "\"Maine\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "5",
          "label": {
            "value": "\"North Dakota\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "6",
          "label": {
            "value": "\"Florida\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "7",
          "label": {
            "value": "\"North Takoma\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "8",
          "label": {
            "value": "\"California\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "9",
          "label": {
            "value": "\"Texas\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "10",
          "label": {
            "value": "\"Massachusetts\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "11",
          "label": {
            "value": "\"Nevada\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "12",
          "label": {
            "value": "\"Illinois\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "13",
          "label": {
            "value": "\"Not in any state, you fool!\"",
            "type": "VTL|MD"
          }
        }
      ]
    },
    {
      "id": "j4nw5cqz-bis",
      "componentType": "Dropdown",
      "mandatory": false,
      "page": "1",
      "label": {
        "value": "\"In which state do The Simpsons reside?\"",
        "type": "VTL|MD"
      },
      "response": {
        "name": "STATE2"
      },
      "options": [
        {
          "value": "1",
          "label": {
            "value": "\"Washington\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "2",
          "label": {
            "value": "\"Kentucky\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "3",
          "label": {
            "value": "\"Ohio\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "4",
          "label": {
            "value": "\"Maine\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "5",
          "label": {
            "value": "\"North Dakota\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "6",
          "label": {
            "value": "\"Florida\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "7",
          "label": {
            "value": "\"North Takoma\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "8",
          "label": {
            "value": "\"California\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "9",
          "label": {
            "value": "\"Texas\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "10",
          "label": {
            "value": "\"Massachusetts\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "11",
          "label": {
            "value": "\"Nevada\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "12",
          "label": {
            "value": "\"Illinois\"",
            "type": "VTL|MD"
          }
        },
        {
          "value": "13",
          "label": {
            "value": "\"Not in any state, you fool!\"",
            "type": "VTL|MD"
          }
        }
      ]
    }
  ],
  "variables": [
    {
      "variableType": "COLLECTED",
      "name": "STATE",
      "componentRef": "j4nw5cqz",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": "2",
        "FORCED": "3",
        "EDITED": null,
        "INPUTTED": null
      }
    },
    {
      "variableType": "COLLECTED",
      "name": "STATE2",
      "componentRef": "j4nw5cqz-bis",
      "values": {
        "PREVIOUS": null,
        "COLLECTED": "3",
        "FORCED": "2",
        "EDITED": null,
        "INPUTTED": null
      }
    }
  ]
}

Data

{}

Code

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>
  );
}

Rendu

Loading...