DeclarationOfExposure

The DeclarationOfExposure component renders a list of declaration questions, each with a title, optional tooltip, and a set of radio options (typically Yes/No). It also calculates a boolean output based on whether each answer matches the allowed option and displays an alert if any answer is invalid..

import { DeclarationOfExposure } from "tawuniya";

👉 View in Storybook

---

Prop	Type	Default	Description
items	DeclarationItem[]	—	List of declaration questions & radio options
alertTitle	string	"Notice"	Alert heading text when any option becomes "yes"
alertDescription	ReactNode	"This is …"	Alert body text
classNames	Partial<{ wrapperClassName, itemWrapperClassName, titleClassNames, tooltipIconClassName, tooltipWrapperClassName, optionsWrapperClassName, optionsClassName }>	—	Override internal CSS classes
onChange	(output: boolean) => void	—	Returns true/false based on selected values

The output is computed automatically

• If all selected items match their allowedOption → output is true
• If any selected item does not match allowedOption → output is false
• The component triggers onChange with the current boolean result whenever a selection changes

Basic Usage

<DeclarationOfExposure
  items={[
    {
      id: "OPTIONOne",
      title: "Are you politically exposed person (PEP)",
      tooltipContent:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.",
      selectedItem: "no",
      allowedOption: "no",
      options: [
        { value: "yes", label: "Yes" },
        { value: "no", label: "No" },
        {
          value: "family-or-close-associate",
          label: "Yes, Family or Close Associate",
        },
      ],
    },
    {
      id: "OptionTwo",
      title: "Are you a related party?",
      tooltipIcon: "chat-information",
      tooltipContent:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      selectedItem: "no",
      allowedOption: "yes",
      options: [
        { value: "yes", label: "Yes" },
        { value: "no", label: "No" },
      ],
    },
  ]}
/>

With Tooltip

<DeclarationOfExposure
  items={[
    {
      id: "sanctioned",
      title: "Are you subject to sanctions?",
      tooltipContent: "Economic restrictions or legal enforcement",
      options: [
        { label: "Yes", value: "yes" },
        { label: "No", value: "no" },
      ],
    },
  ]}
/>

With onChange callback

<DeclarationOfExposure
  items={questions}
  onChange={(result) => {
    console.log("Is Allowed:", result);
  }}
/>

Custom Alert Text

<DeclarationOfExposure
  items={items}
  alertTitle="Important Regulatory Notice"
  alertDescription="One or more declarations require additional review."
/>

Custom Class Names

<DeclarationOfExposure
  items={items}
  classNames={{
    wrapperClassName: "bg-blue-50 p-4 rounded-lg",
    titleClassNames: "text-blue-700",
    optionsClassName: "border-blue-200",
  }}
/>

Features

• Fully controlled answers per item
• Boolean output calculation
• Built-in alert state handling
• Supports tooltips on any question
• Customizable classNames for all inner parts