Z

ToggleRow

Label + description + toggle for settings lists - the perfect pattern for preference screens.

Narrative Section Stable

Basic Usage

A toggle with label and optional description in a horizontal layout.

Receive instant alerts on your device

Get text messages for critical updates

Settings Screen Example

A complete settings section using ToggleRow components.

Alert Preferences

Get notified when Zika risk levels change in your area

Receive updates when new health information is available

Stay informed about travel recommendations

Get a weekly digest of Zika activity in your region

Disabled State

Disabled toggles with appropriate visual feedback.

Cannot be disabled - required for safety

Upgrade to premium to enable this feature

Without Description

Simple toggles when the label is self-explanatory.

Multiple Sections

Organize settings into logical groups.

Notifications

Receive alerts via email

Receive alerts on your device

Privacy

Allow app to access your location for personalized risk alerts

Help improve the app by sharing anonymous usage statistics

Accessibility

Minimize animations and transitions

Increase contrast for better visibility

In Forms

ToggleRow works seamlessly in forms with proper name attributes.

Notification Preferences

Receive important updates via email

Get text messages for urgent notifications

Props

Prop Type Default Description
label string required Setting name/label
description string null Supporting description text
checked boolean false Toggle on/off state
disabled boolean false Disabled state
name string null Input name for form submission
class string '' Additional CSS classes

Accessibility & Best Practices

WCAG 2.1 AA Compliance

  • Label is properly associated with toggle via for attribute
  • Toggle has ARIA label matching the row label
  • Disabled state is visually distinct and communicated to screen readers
  • Entire row is clickable for easier interaction
  • 48px minimum touch target maintained
  • High contrast between text and background

Trauma-Informed Design

  • Clear, descriptive labels reduce cognitive load
  • Descriptions explain what will happen when toggled
  • No sudden changes - users control when settings apply
  • Disabled states explain why (e.g., "required for safety")
  • Consistent visual language across all settings

Best Practices

  • Use clear, action-oriented labels (e.g., "Email Notifications" not "Emails")
  • Provide descriptions for non-obvious settings
  • Group related settings together with section headings
  • Use dividers to separate individual toggle rows
  • Consider the default state carefully - what's safest/most helpful?
  • Explain why a setting is disabled if applicable

Code Example

<div class="divide-y divide-neutral-200">
    <x-narrative-sections.toggle-row
        label="Email Notifications"
        description="Receive alerts via email"
        name="email_notifications"
        checked
    />

    <x-narrative-sections.toggle-row
        label="Push Notifications"
        description="Receive alerts on your device"
        name="push_notifications"
    />

    <x-narrative-sections.toggle-row
        label="Critical Alerts"
        description="Cannot be disabled"
        name="critical_alerts"
        checked
        disabled
    />
</div>