User Profile Settings Form

Build a user profile settings form that includes a dark mode toggle switch and a notification preferences section with proper accessibility support.

Requirements

The form should include:

1. A toggle switch for enabling/disabling dark mode
2. A label associated with the toggle that reads "Enable Dark Mode"
3. A description below the toggle that reads "Switch between light and dark theme"
4. A fieldset for notification preferences containing:
   • A legend that reads "Notification Preferences"
   • A checkbox for email notifications with the label "Email Notifications"
   • A checkbox for push notifications with the label "Push Notifications"
   • A description for the fieldset that reads "Choose how you want to be notified"

The implementation should ensure that:

• All form controls are properly labeled and associated with their labels
• Descriptions are properly associated with their controls
• The form is fully accessible to screen readers
• ARIA attributes are correctly applied to communicate state

Test Cases

• The dark mode toggle should have a label that is properly associated @test
• The dark mode toggle should have a description that is properly associated @test
• The notification fieldset should have a legend that is properly associated @test
• The notification fieldset should have a description that is properly associated @test
• Checkboxes should have labels that are properly associated @test

Implementation

@generates

API

export function ProfileSettings(): JSX.Element;

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible UI components with automatic ARIA attribute management.