Formio.createForm(document.getElementById('formio'), {
  components: [
    {
      label: 'Children',
      key: 'children',
      type: 'datagrid',
      input: true,
      components: [
        {
          type: 'panel',
          label: 'User Information',
          key: 'userinfo',
          components: [
            {
              label: 'First Name',
              key: 'firstName',
              type: 'textfield',
              input: true,
            },
            {
              label: 'Last Name',
              key: 'lastName',
              type: 'textfield',
              input: true,
            },
            {
              label: 'Gender',
              key: 'gender',
              type: 'radio',
              inputType: 'radio',
              input: true,
              values: [
                {
                  label: 'Male',
                  value: 'male',
                },
                {
                  label: 'Female',
                  value: 'female',
                },
              ],
            },
            {
              type: 'checkbox',
              label: 'Dependant',
              key: 'dependant',
              inputType: 'checkbox',
              input: true,
            },
            {
              label: 'Birthdate',
              key: 'birthdate',
              type: 'datetime',
              input: true,
              format: 'yyyy-MM-dd hh:mm a',
              enableDate: true,
              enableTime: true,
              defaultDate: '',
              datepickerMode: 'day',
              datePicker: {
                showWeeks: true,
                startingDay: 0,
                initDate: '',
                minMode: 'day',
                maxMode: 'year',
                yearRows: 4,
                yearColumns: 5,
                datepickerMode: 'day',
              },
              timePicker: {
                hourStep: 1,
                minuteStep: 1,
                showMeridian: true,
                readonlyInput: false,
                mousewheel: true,
                arrowkeys: true,
              },
              conditional: {
                eq: 'true',
                when: 'dependant',
                show: 'true',
              },
            },
          ],
        },
      ],
    },
  ],
});