# Consent & Declaration / Data Sharing Consent Data sharing consent patterns for inter-agency data sharing with partner details and consent management. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-data-sharing-consent--data-sharing-consent-full-screen ## Pattern variants - Data Sharing Consent - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-data-sharing-consent--data-sharing-consent-full-screen - Data Sharing Consent - Card: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-data-sharing-consent--data-sharing-consent-card ## When to use this pattern Use Consent & Declaration / Data Sharing Consent when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Consent & Declaration / Data Sharing Consent. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. C A R D_1 — Data Sharing Consent - Card HTML: ```html

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

Required consents cannot be withdrawn as they are necessary for the scheme to function.

``` React: ```jsx import React from 'react'; const ConsentDeclarationDataSharingConsentExample1Demo = () => ( <>

Data Sharing Consent

DPDP Act 2023

Scheme: PM Kisan

To enable Direct Benefit Transfer for PM Kisan, the Agriculture Department will share your details with the following third parties. Please review and confirm your consent.

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

error_outline

Required consents cannot be withdrawn as they are necessary for the scheme to function.

); export default ConsentDeclarationDataSharingConsentExample1Demo; ``` Angular: ```html

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

Required consents cannot be withdrawn as they are necessary for the scheme to function.

``` ### 2. F U L L S C R E E N_1 — Data Sharing Consent - Full Screen HTML: ```html

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

Required consents cannot be withdrawn as they are necessary for the scheme to function.

``` React: ```jsx import React from 'react'; const ConsentDeclarationDataSharingConsentExample2Demo = () => ( <>

Data Sharing Consent

DPDP Act 2023

Scheme: PM Kisan

To enable Direct Benefit Transfer for PM Kisan, the Agriculture Department will share your details with the following third parties. Please review and confirm your consent.

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

error_outline

Required consents cannot be withdrawn as they are necessary for the scheme to function.

); export default ConsentDeclarationDataSharingConsentExample2Demo; ``` Angular: ```html

Third Party	Data Shared	Purpose	Duration	Status
Bank of India	Aadhaar, Name	Account matching	1 year	Required
Payment Corp	Transaction ID	Payment processing	90 days	Required
SMS Gateway	Mobile Number	Status alerts	Scheme duration	Optional

Required consents cannot be withdrawn as they are necessary for the scheme to function.

```