---
title: HIPAA Release Form
product: PDF Generator
description: Download a printable HIPAA release form in PDF. Generate editable or prefilled authorization forms for sharing medical records with SurveyJS PDF Generator.
framework: Vue 3
source: https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/vue3js
index: https://surveyjs.io/pdf-generator/examples/overview.md
---

# HIPAA Release Form (Vue 3)

## Files

### `public/index.html`

```html
<div style="display: flex;">
    <div id="app" style="flex: 1 1 0%; height: 100%; min-width: 0;"></div>
    <div id="pdf-preview" style="flex: 0.7 0.7 0%; display: none">
        <embed id="pdf-preview-frame" type="application/pdf" style="width:100%; height:100%;" />
    </div>
</div>
```

### `src/theme.js`

```js
export const themeJson = {
    "themeName": "plain",
    "colorPalette": "light",
    "isPanelless": true,
    "backgroundImage": "",
    "backgroundOpacity": 1,
    "backgroundImageAttachment": "scroll",
    "backgroundImageFit": "cover",
    "cssVariables": {
        "--sjs2-color-bg-basic-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-property-grid": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-tabs": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-toolbox": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-primary-dim": "rgba(248, 248, 248, 1)",
        "--sjs2-color-bg-neutral-tertiary-dim": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-surface-survey-panelless": "rgba(255, 255, 255, 1)",
        "--sjs2-color-utility-surface-survey": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-secondary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-basic-secondary-dim": "rgba(243, 243, 243, 1)",
        "--sjs2-color-fg-basic-primary": "rgba(0, 0, 0, 0.91)",
        "--sjs2-color-fg-basic-secondary": "rgba(0, 0, 0, 0.45)",
        "--sjs2-color-project-brand-600": "rgba(68, 68, 68, 1)",
        "--sjs2-color-bg-brand-secondary": "rgba(68, 68, 68, 0.1)",
        "--sjs2-color-bg-brand-primary-dim": "rgba(68, 68, 68, 1)",
        "--sjs2-color-fg-brand-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-fg-brand-primary-disabled": "rgba(255, 255, 255, 0.25)",
        "--sjs2-base-unit-size": "5.2px",
        "--sjs2-base-unit-spacing": "5.2px",
        "--sjs2-base-unit-radius": "4px",
        "--sjs2-color-bg-accent-primary": "rgba(255, 152, 20, 1)",
        "--sjs2-color-bg-accent-secondary": "rgba(255, 152, 20, 0.1)",
        "--sjs2-color-bg-accent-secondary-dim": "rgba(255, 152, 20, 0.25)",
        "--sjs2-color-fg-accent-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-fg-accent-primary-disabled": "rgba(255, 255, 255, 0.25)",
        "--sjs2-border-effect-surface-default": "inset 0px 0px 0px 1px rgba(68, 68, 68, 0.2)",
        "--sjs2-border-effect-floating-default": "0px 0px 0px 1px rgba(0, 0, 0, 0.1),0px 8px 16px 0px rgba(0, 0, 0, 0.05)",
        "--sjs2-border-effect-component-formbox-default": "1px 1px 1px 1px rgba(68, 68, 68, 0.2), inset 1px 1px 1px 1px rgba(68, 68, 68, 0.2)",
        "--sjs2-color-border-basic-secondary": "rgba(68, 68, 68, 0.15)",
        "--sjs2-color-component-input-default-line": "rgba(68, 68, 68, 0.15)",
        "--sjs2-color-border-basic-secondary-overlay": "rgba(0, 0, 0, 0.16)",
        "--sjs2-color-bg-alert-primary": "rgba(229, 10, 62, 1)",
        "--sjs2-color-bg-alert-secondary": "rgba(229, 10, 62, 0.1)",
        "--sjs2-color-fg-alert-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-positive-primary": "rgba(25, 179, 148, 1)",
        "--sjs2-color-bg-positive-secondary": "rgba(25, 179, 148, 0.1)",
        "--sjs2-color-fg-positive-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-note-primary": "rgba(67, 127, 217, 1)",
        "--sjs2-color-bg-note-secondary": "rgba(67, 127, 217, 0.1)",
        "--sjs2-color-fg-note-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-bg-warning-primary": "rgba(255, 152, 20, 1)",
        "--sjs2-color-bg-warning-secondary": "rgba(255, 152, 20, 0.1)",
        "--sjs2-color-fg-warning-on-primary": "rgba(255, 255, 255, 1)",
        "--sjs2-color-component-page-default-title": "rgba(68, 68, 68, 0.91)",
        "--sjs2-color-component-page-default-description": "rgba(68, 68, 68, 0.45)",
        "--sjs2-color-component-question-default-title": "rgba(68, 68, 68, 0.91)",
        "--sjs2-color-fg-basic-primary": "rgba(68, 68, 68, 0.91)",
        "--sjs2-color-component-question-default-description": "rgba(68, 68, 68, 0.45)",
        "--sjs2-color-component-input-default-value": "rgba(68, 68, 68, 0.91)",
        "--sjs2-color-component-input-default-placeholder": "rgba(68, 68, 68, 0.45)",
        "--sjs2-color-component-boolean-item-false-default-value": "rgba(68, 68, 68, 0.45)",
        "--sjs2-color-component-input-default-label": "rgba(68, 68, 68, 0.45)",
        "--sjs2-base-unit-font-size": "7.2px",
        "--sjs2-base-unit-line-height": "7.2px"
    },
    "headerView": "advanced"
};
```

### `src/App.vue`

```html
<template>
    <SurveyComponent :model="survey" />
</template>
<script setup lang="ts">
    import { Model } from "survey-core";
    import { SurveyComponent } from "survey-vue3-ui";
    import "survey-core/survey-core.min.css";
    import { SurveyPDF } from "survey-pdf";
    import { themeJson } from "./theme";
    import "./index.css";
    import { json } from "./json";

    function createSurveyPdfModel (surveyModel) {
        const surveyPDF = new SurveyPDF(json);
        if (surveyModel) {
            surveyPDF.data = surveyModel.data;
            surveyPDF.locale = surveyModel.locale;
            
            
        }
        surveyPDF.applyStyle({
            question: {
                description: {
                    fontColor: "black"
                }
            }
        });
        return surveyPDF;
    }
    function saveSurveyToPdf (filename, surveyModel) {
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.save(filename);
    }
    
    const previewDiv = document.getElementById("pdf-preview");
    const previewEmbed = document.getElementById("pdf-preview-frame");
    let pdfBlobUrl;
    
    function showPdfPreview(surveyModel) {
        if (!previewDiv || !previewEmbed) return;
    
        const pdfDoc = createSurveyPdfModel(surveyModel);
        if (!pdfDoc) return;
    
        pdfDoc.raw("blob").then((blob) => {
            if (pdfBlobUrl) {
                URL.revokeObjectURL(pdfBlobUrl);
            }
            pdfBlobUrl = URL.createObjectURL(blob);
            previewEmbed.setAttribute("src", pdfBlobUrl);
            previewDiv.style.display = "block";
        });
    }
    
    function previewPdf(surveyModel) {
        if (!previewDiv) return;
    
        if (previewDiv.style.display !== "none") {
            previewDiv.style.display = "none";
            return;
        }
    
        showPdfPreview(surveyModel);
    }
    
    const survey = new Model(json);
    survey.showCompleteButton = false;
    survey.navigationButtonsLocation = "topBottom";
    survey.addNavigationItem({
        id: "survey_save_as_file",
        title: "Download PDF",
        action: () => {
            saveSurveyToPdf("surveyResult.pdf", survey);
        }
    });
    survey.addNavigationItem({
        id: "survey_pdf_preview",
        title: "Preview PDF",
        visible: window.navigator.pdfViewerEnabled,
        action: () => {
            previewPdf(survey);
        }
    });
    survey.applyTheme(themeJson);
</script>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/json.ts`

```ts
export const json = {
  "title": "HIPAA Release Form",
  "description": "Please complete all sections of this HIPAA release form. If any sections are left blank, this form will be invalid and it will not be possible for your health information to be shared as requested.",
  "headerView": "advanced",
  "pages": [
    {
      "name": "section1",
      "questionTitleLocation": "hidden",
      "title": "Section I",
      "elements": [
        {
          "type": "text",
          "name": "personName",
          "title": "I",
          "titleLocation": "left",
          "descriptionLocation": "underInput",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "authorizedEntity",
          "title": "give my permission for",
          "titleLocation": "top",
          "description": "to share the information listed in Section II of this document with the person(s) or organization(s) I have specified in Section IV of this document.",
          "descriptionLocation": "underInput"
        },
        {
          "type": "checkbox",
          "name": "formOfDisclosure",
          "title": "Form of Disclosure",
          "titleLocation": "top",
          "choices": [
            {
              "value": "electronicCopy",
              "text": " Electronic copy or access via a web-based portal "
            },
            {
              "value": "hardCopy",
              "text": " Hard copy "
            }
          ]
        }
      ]
    },
    {
      "name": "section2",
      "questionTitleLocation": "hidden",
      "title": "Section II - Health Information",
      "elements": [
        {
          "type": "panel",
          "name": "panel2",
          "title": "I would like to give the above healthcare organization permission to",
          "elements": [
            {
              "type": "radiogroup",
              "name": "disclosureType",
              "choices": [
                {
                  "value": "all",
                  "text": "Disclose my complete health record including, but not limited to, diagnoses, lab test results, treatment, and billing records for all conditions."
                },
                {
                  "value": "partial",
                  "text": "Disclose my complete health record except for the following information (please specify if applicable):"
                }
              ]
            },
            {
              "type": "checkbox",
              "name": "excludedInformation",
              "choices": [
                {
                  "value": "mentalHealth",
                  "text": "Mental health records"
                },
                {
                  "value": "communicableDiseases",
                  "text": "Communicable diseases including, but not limited to, HIV and AIDS"
                },
                {
                  "value": "alcoholDrugAbuse",
                  "text": "Alcohol/drug abuse treatment records"
                },
                {
                  "value": "geneticInfo",
                  "text": "Genetic information"
                }
              ],
              "showOtherItem": true,
              "otherText": "Other (specify)",
              "description": "Select the types of information you do NOT want disclosed if you chose 'partial' disclosure above."
            }
          ]
        }
      ]
    },
    {
      "name": "section3",
      "title": "Section III - Reason for Disclosure",
      "elements": [
        {
          "type": "comment",
          "name": "reasonOfDataSharingRequest",
          "title": "Please detail the reasons why information is being shared. If you are initiating the request and do not wish to list the reasons, write 'at my request'",
          "rows": 5
        }
      ]
    },
    {
      "name": "section4",
      "title": "Section IV - Who Can Receive My Health Information",
      "elements": [
        {
          "type": "paneldynamic",
          "name": "authorizedParties",
          "title": "I give authorization for the health information detailed in Section II of this document to be shared with the following individual(s) or organization(s)",
          "description": "Provide the details of the person(s)/organization(s) who may receive your health information. Note that they may not be covered by state/federal privacy rules and may share the information further.",
          "templateElements": [
            {
              "type": "multipletext",
              "name": "authorizedParty",
              "titleLocation": "hidden",
              "items": [
                {
                  "name": "name",
                  "title": "Name"
                },
                {
                  "name": "organization",
                  "title": "Organization"
                },
                {
                  "name": "address",
                  "title": "Address"
                }
              ]
            }
          ],
          "templateTitle": "Authorized party #{panelIndex}",
          "panelsState": "firstExpanded",
          "panelCount": 3
        }
      ]
    },
    {
      "name": "section5",
      "title": "Section V - Duration of Authorization",
      "elements": [
        {
          "type": "boolean",
          "name": "authValidIndefinitely",
          "title": "I authorize the sharing of my health information for all past, present, and future periods",
          "displayMode": "checkbox"
        },
        {
          "type": "multipletext",
          "name": "revokeAuthParty",
          "title": "Authorization validity period",
          "description": "Fill in the fields below if you did not check the previous box.",
          "itemTitleWidth": "170px",
          "items": [
            {
              "name": "eventName",
              "title": "From the date of signature until the following event:"
            },
            {
              "type": "text",
              "name": "authValidFrom",
              "title": "From date:",
              "titleLocation": "hidden",
              "inputType": "date"
            },
            {
              "type": "text",
              "name": "authValidTo",
              "title": "To date:",
              "inputType": "date"
            }
          ]
        },
        {
          "type": "multipletext",
          "name": "revokeAuthParty",
          "title": "I understand that I am permitted to revoke this authorization at any time by submitting a written request to:",
          "itemTitleWidth": "170px",
          "items": [
            {
              "name": "name",
              "title": "Name"
            },
            {
              "name": "organization",
              "title": "Organization"
            },
            {
              "name": "address",
              "title": "Address"
            }
          ]
        },
        {
          "type": "html",
          "name": "question2",
          "html": "<div><p><strong>I understand that:</strong></p><p>If my information has already been shared before revocation, it may be too late to cancel permission to share my health data.</p><p>I do not need to give additional permission for the information detailed in Section II to be shared with the person(s) or organization(s) listed in Section IV.</p><p>Refusing to sign or cancelling this authorization will not prevent me from receiving treatment or benefits, unless this information is required to determine eligibility or payment.</p></div>"
        }
      ]
    },
    {
      "name": "section6",
      "title": "Section VI - Signature",
      "elements": [
        {
          "type": "signaturepad",
          "name": "signature",
          "title": "Signature",
          "signatureHeight": "100px"
        },
        {
          "type": "text",
          "name": "date",
          "startWithNewLine": false,
          "title": "Date",
          "inputType": "date"
        },
        {
          "type": "text",
          "name": "userNameConfirmation",
          "title": "Your name"
        },
        {
          "type": "panel",
          "name": "panel1",
          "title": "If this form is completed by someone with legal authority to act on the individual's behalf (for example, a parent, legal guardian, or healthcare agent), please provide the following information:",
          "elements": [
            {
              "type": "text",
              "name": "question9",
              "title": "Name of the person completing this form"
            },
            {
              "type": "signaturepad",
              "name": "question8",
              "title": "Signature of the person completing this form",
              "signatureHeight": "100px",
              "startWithNewLine": false
            },
            {
              "type": "comment",
              "name": "question10",
              "title": "Describe the legal authority that allows this person to sign this form"
            }
          ]
        }
      ]
    }
  ],
  "questionErrorLocation": "bottom",
  "questionsOnPageMode": "singlePage"
};
```

### `src/main.ts`

```ts
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");
```

### `src/shims-vue.d.ts`

```ts
/* eslint-disable */
declare module "*.vue" {
    import type { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

### `src/theme.ts`

```ts
export const themeJson = {};
```

### `.eslintrc.js`

```js
module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        "plugin:vue/vue3-essential",
        "eslint:recommended",
        "@vue/typescript/recommended",
        "@vue/prettier",
        "@vue/prettier/@typescript-eslint"
    ],
    parserOptions: {
        ecmaVersion: 2020
    },
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
    },
    overrides: [
        {
            files: [
                "**/__tests__/*.{j,t}s?(x)",
                "**/tests/unit/**/*.spec.{j,t}s?(x)"
            ],
            env: {
                jest: true
            }
        }
    ]
};
```

### `babel.config.js`

```js
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"]
};
```

### `package.json`

```json
{
  "name": "surveyjs-library-vue3",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "tslib": "2.6.1",
    "vue": "^3.4.1",
    "survey-core": "latest",
    "survey-pdf": "latest",
    "survey-vue3-ui": "latest",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3"
  }
}
```

### `tsconfig.json`

```json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/angular.md)
- [React](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/reactjs.md)
- [jQuery](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/jquery.md)
- [Vanilla JS](https://surveyjs.io/pdf-generator/examples/pdf-healthcare-hipaa-release-form-template/vanillajs.md)