# Consent & Declaration / Consent Required Consent Required patterns for government services including full-screen and card-style consent capture layouts with data usage tables. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-required--consent-required-full-screen ## Pattern variants - Consent Required - Full Screen: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-required--consent-required-full-screen - Consent Validation: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-required--consent-validation - Consent Card Layout: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-consent-declaration-consent-required--consent-card-layout ## When to use this pattern Use Consent & Declaration / Consent Required 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 / Consent Required. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. C A R D_1 — Consent Card Layout HTML: ```html

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

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

Your Data, Your Control

To process your Income Certificate application, the Revenue Department will use the following data:

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

Decline and exit

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

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

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

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

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

Your Data, Your Control

To process your Income Certificate application, the Revenue Department will use the following data:

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

Decline and exit

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

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

``` ### 3. F U L L S C R E E N_2 — Consent Validation HTML: ```html

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

Consent not given. You cannot proceed without consenting.

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

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

Your Data, Your Control

To process your Income Certificate application, the Revenue Department will use the following data:

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

error_outline

Consent not given. You cannot proceed without consenting.

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

Decline and exit

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

Data Type	Purpose	Retention	Status
Aadhaar Number	Identity verification	7 years	Required
Address	Record keeping	7 years	Required
Email	Status updates	1 year	Required

Consent not given. You cannot proceed without consenting.

I consent to sharing the required information listed above ^*

I also consent to receiving email updates regarding my application

```