SettingsSection Component

SettingsSection

A grouped settings panel organism for organizing user preferences. Supports collapsible sections, icons, and wraps toggle rows and other form controls.

Basic Settings Section

Notifications

Control how and when you receive alerts.

Push Notifications

Receive alerts on your device

Email Notifications

Get daily summary emails

SMS Alerts

High-priority alerts via text message

Collapsible Section

Privacy Settings

Manage your data and privacy preferences.

Location Sharing

Allow the app to access your location

Analytics

Help improve the app with anonymous usage data

Advanced Settings

Additional configuration options.

Advanced settings content goes here...

Usage Example

<x-interface-frameworks.settings-section
    title="Notifications"
    description="Control how and when you receive alerts."
    icon="bell"
    :collapsible="true"
    :defaultOpen="true"
>
    <x-narrative-sections.toggle-row
        label="Push Notifications"
        description="Receive alerts on your device"
        :checked="true"
    />
</x-interface-frameworks.settings-section>

Props

Prop	Type	Default	Description
title	string	''	Section title
description	string	''	Section description
icon	string\|null	null	Icon name to display
collapsible	boolean	false	Enable collapse functionality
defaultOpen	boolean	true	Initial open state when collapsible
class	string	''	Additional CSS classes

Accessibility Features

Section uses semantic section element
Collapsible header has button role and aria-expanded
Content area has unique ID for aria-controls
Toggle rows maintain label associations
Keyboard accessible collapse toggle