Skip to main content

SafetyConsent

A dialog component for obtaining informed consent before users engage with healing practices. Ensures users understand risks, limitations, and proper usage.

Purpose​

The SafetyConsent component provides:

  • Medical and legal disclaimers
  • Contraindication warnings
  • Informed consent acknowledgment
  • Ethical protection for users and providers
  • Documentation of user understanding

Live Demo​

Medical Disclaimer Example​

Contraindications Warning​

Traditional Practice Disclaimer​

Props​

PropTypeRequiredDefaultDescription
titlestringYes-Dialog title (e.g., "Medical Disclaimer")
bodystringYes-Full disclaimer text (supports paragraphs via \n\n)
checkboxLabelstringNo"I understand and acknowledge..."Acknowledgment checkbox text
confirmLabelstringNo"I Consent"Confirm button text
cancelLabelstringNo"Cancel"Cancel button text (optional)
onConfirm() => voidYes-Callback when user confirms
onCancel() => voidNo-Optional callback for cancel action
classNamestringNo-Additional CSS classes

When to Use​

Use SafetyConsent when documenting practices that involve:

Medical Practices​

  • Exercise or movement that could cause injury
  • Breathing techniques affecting physiology
  • Dietary recommendations or fasting protocols
  • Supplement or herb usage
  • Practices contraindicated for certain conditions

Psychological Practices​

  • Deep emotional processing
  • Trauma-sensitive work
  • Altered states of consciousness
  • Practices that may trigger difficult emotions
  • Therapeutic techniques requiring professional support

Traditional Practices​

  • Practices from traditional medicine systems
  • Spiritual or energetic practices
  • Techniques requiring proper instruction
  • Closed practices adapted for secular use
  • Practices with cultural protocols
  • Practices you're documenting but not licensed to teach
  • Content that could be misused
  • Techniques requiring supervision
  • Practices with liability concerns

Code Examples​

Basic Medical Disclaimer​

import { SafetyConsent } from '@site/src/components/healing';

<SafetyConsent
  title="Medical Disclaimer"
  body="This information is for educational purposes only..."
  onConfirm={() => showPractice()}
/>

With Contraindications​

<SafetyConsent
  title="Safety Warning"
  body="DO NOT practice if you have:
• Heart conditions
• High blood pressure
• Pregnancy

Always consult your doctor before starting new practices."
  checkboxLabel="I confirm I do not have these contraindications"
  confirmLabel="I'm Safe to Practice"
  cancelLabel="Not for Me"
  onConfirm={() => enablePractice()}
  onCancel={() => suggestAlternatives()}
/>

React Integration​

import { SafetyConsent } from '@site/src/components/healing';
import { useState } from 'react';

function ProtectedPractice() {
  const [hasConsented, setHasConsented] = useState(false);

  if (!hasConsented) {
    return (
      <SafetyConsent
        title="Important Safety Information"
        body="This practice involves..."
        onConfirm={() => setHasConsented(true)}
        onCancel={() => window.history.back()}
      />
    );
  }

  return <PracticeContent />;
}

With Session Storage​

function PersistentConsent() {
  const [hasConsented, setHasConsented] = useState(() => {
    return sessionStorage.getItem('breathwork-consent') === 'true';
  });

  const handleConfirm = () => {
    sessionStorage.setItem('breathwork-consent', 'true');
    setHasConsented(true);
  };

  if (!hasConsented) {
    return (
      <SafetyConsent
        title="Breathwork Safety"
        body="..."
        onConfirm={handleConfirm}
      />
    );
  }

  return <BreathworkPractice />;
}

Accessibility Features​

  • Dialog role: Proper ARIA dialog semantics
  • Focus management: Focus trapped within dialog
  • Keyboard navigation: Full keyboard support
    • Tab: Navigate through elements
    • Space / Enter: Toggle checkbox, activate buttons
    • Esc: Cancel (if cancel button provided)
  • Screen reader announcements:
    • Title read as dialog heading
    • Body content properly structured
    • Checkbox state announced
    • Button disabled state communicated
  • Visual indicators:
    • Clear disabled state for unacknowledged consent
    • High contrast warning icon
    • Focus rings on interactive elements
Accessibility

The dialog is fully keyboard navigable and screen reader friendly. Users who cannot see the checkbox state will hear "enabled" or "disabled" status on the confirm button.

Best Practices​

Content Guidelines​

Writing Disclaimers
  • Be specific: List actual contraindications, not vague warnings
  • Be clear: Use simple language, avoid jargon
  • Be honest: Don't oversell or undersell risks
  • Be actionable: Tell users what to do (consult doctor, stop if X happens)
  • Be concise: Long disclaimers aren't read; keep essential points
Not Legal Advice

This component helps with informed consent but doesn't constitute legal protection. Consult a lawyer about liability for your specific use case.

Ethical Requirements​

Always include SafetyConsent for:

  • Practices that could cause physical harm if done incorrectly
  • Techniques contraindicated for medical conditions
  • Practices that could trigger psychological distress
  • Traditional practices you're not qualified to teach professionally
  • Content where misuse could cause harm

Consider including SafetyConsent for:

  • Dietary or supplement recommendations
  • Exercise or movement practices
  • Breathwork or meditation techniques
  • Practices requiring supervision
  • Content targeting vulnerable populations

User Experience​

  1. Present disclaimer: User encounters warning before content
  2. Read content: User reads safety information
  3. Acknowledge: User checks acknowledgment box
  4. Enable action: Confirm button becomes active
  5. Proceed: User confirms and accesses content

Reducing Friction​

Balance safety with user experience:

  • Session persistence: Don't require consent every page visit
  • Clear labeling: Users know what they're consenting to
  • Cancel option: Users can opt out if practice isn't for them
  • Respectful tone: Not fear-mongering, just honest safety info

Visual Design​

Warning Aesthetic​

  • Border: Yellow-orange warning color
  • Icon: Triangle warning symbol
  • Background: Dark neutral with warning border
  • Typography: Clear hierarchy with bold title

State Transitions​

  • Unacknowledged: Confirm button disabled, gray, muted
  • Acknowledged: Confirm button enabled, green, glowing
  • Hover states: Subtle feedback on interactive elements
  • Focus states: Clear keyboard focus indicators

Technical Notes​

Paragraph Parsing​

Body text supports paragraphs via double newlines:

body="First paragraph.

Second paragraph.

Third paragraph."

Internally split by \n\n and rendered as separate <p> tags.

State Management​

Component manages checkbox state internally, but calls external onConfirm/onCancel callbacks for parent component integration.

Persistence Strategies​

Consider these approaches for multi-page consent:

// Session storage (current session only)
sessionStorage.setItem('consent-key', 'true');

// Local storage (persists across sessions)
localStorage.setItem('consent-key', 'true');

// Cookie (with expiration)
document.cookie = "consent=true; max-age=31536000";

// Database (for logged-in users)
await saveUserConsent(userId, practiceId);

Further Reading​