Formiz
Examples
Simple FormWizardCollectionExotic FieldsLot of fieldsDynamic StepsSteppersAsync initial valuesReal life #1
Formiz websiteGitHub

Real life #1

View code on GitHub

Create a Docker Webapp

❌
✨
Use Docker hub image like ubuntu or bearstudio/design-system
❌
✨
Step 1 / 3

# useFormContext()

{
  "id": ":R5t6:",
  "resetKey": 0,
  "isReady": true,
  "isSubmitted": false,
  "isValid": false,
  "isValidating": false,
  "isPristine": true,
  "steps": [
    {
      "name": "dockerImage",
      "isSubmitted": false,
      "index": 0,
      "isCurrent": true,
      "isValid": false,
      "isPristine": true,
      "isValidating": false,
      "isVisited": true
    },
    {
      "name": "exposedPorts",
      "isSubmitted": false,
      "index": 1,
      "isCurrent": false,
      "isValid": true,
      "isPristine": true,
      "isValidating": false,
      "isVisited": false
    },
    {
      "name": "step1",
      "isSubmitted": false,
      "index": 2,
      "isCurrent": false,
      "isValid": false,
      "isPristine": true,
      "isValidating": false,
      "isVisited": false
    }
  ],
  "currentStep": {
    "name": "dockerImage",
    "isSubmitted": false,
    "index": 0,
    "isCurrent": true,
    "isValid": false,
    "isPristine": true,
    "isValidating": false,
    "isVisited": true
  },
  "isStepPristine": true,
  "isStepValid": false,
  "isStepValidating": false,
  "isStepSubmitted": false,
  "isFirstStep": true,
  "isLastStep": false
}

# useFormFields()

{
  "name": {
    "id": "formiz-:R5t6:-field-name__:R3badalt6:",
    "isValid": false,
    "shouldDisplayError": false,
    "isTouched": false,
    "errorMessages": [
      "Required"
    ],
    "errorMessage": "Required",
    "isPristine": true,
    "isSubmitted": false,
    "isValidating": false,
    "isExternalProcessing": false,
    "isDebouncing": false,
    "isProcessing": false,
    "isReady": true,
    "resetKey": 0,
    "value": null,
    "rawValue": null
  },
  "description": {
    "id": "formiz-:R5t6:-field-description__:R5badalt6:",
    "isValid": true,
    "shouldDisplayError": false,
    "isTouched": false,
    "errorMessages": [],
    "isPristine": true,
    "isSubmitted": false,
    "isValidating": false,
    "isExternalProcessing": false,
    "isDebouncing": false,
    "isProcessing": false,
    "isReady": true,
    "resetKey": 0,
    "value": null,
    "rawValue": null
  },
  "docker": {
    "image": {
      "id": "formiz-:R5t6:-field-docker.image__:R2radalt6:",
      "isValid": false,
      "shouldDisplayError": false,
      "isTouched": false,
      "errorMessages": [
        "Required"
      ],
      "errorMessage": "Required",
      "isPristine": true,
      "isSubmitted": false,
      "isValidating": false,
      "isExternalProcessing": false,
      "isDebouncing": false,
      "isProcessing": false,
      "isReady": true,
      "resetKey": 0,
      "value": null,
      "rawValue": null
    }
  }
}