Toggle Switch

Easy Forms includes modern toggle switch components for boolean fields and on/off states.

Basic Toggle

Simple on/off toggle switch.

Statamic Field Configuration:

• Field Type: Toggle

Example:

handle: newsletter_subscribe
field:
  type: toggle
  display: Subscribe to newsletter
  default: false

Features

• Modern toggle UI
• Smooth animation
• Clear on/off state
• Touch-friendly
• Keyboard accessible
• Screen reader support

Configuration Options

Default State

Set the default toggle state:

handle: notifications
field:
  type: toggle
  display: Enable notifications
  default: true

Required Toggle

Require the toggle to be enabled:

handle: terms_acceptance
field:
  type: toggle
  display: I accept the terms and conditions
  validate: required|accepted

Styling Options

Toggle Size

Customize the toggle size:

handle: notifications
field:
  type: toggle
  display: Notifications
  size: large  # Options: small, medium, large

Toggle Color

Customize the active state color:

handle: notifications
field:
  type: toggle
  display: Notifications
  color: blue  # Options: blue, green, red, purple

With Label Position

Control label position:

handle: notifications
field:
  type: toggle
  display: Enable notifications
  label_position: left  # Options: left, right

Use Cases

Preferences

handle: email_notifications
field:
  type: toggle
  display: Email notifications
  default: true

handle: sms_notifications
field:
  type: toggle
  display: SMS notifications
  default: false

handle: push_notifications
field:
  type: toggle
  display: Push notifications
  default: false

Features

handle: enable_analytics
field:
  type: toggle
  display: Enable analytics tracking
  default: false

handle: enable_api_access
field:
  type: toggle
  display: API access
  default: false

Privacy Settings

handle: profile_public
field:
  type: toggle
  display: Make profile public
  default: false

handle: show_email
field:
  type: toggle
  display: Show email address
  default: false

Accessibility

Toggle switches include:

• Keyboard navigation (Space, Enter)
• Focus indicators
• Screen reader support
• ARIA labels and states
• Clear visual feedback
• Touch-friendly size

Keyboard Navigation

• Tab: Focus toggle
• Space/Enter: Toggle state
• Arrow keys: Not used (follows checkbox pattern)

Validation

Required Toggle

Require the toggle to be enabled:

handle: agree_terms
field:
  type: toggle
  display: I agree to the terms
  validate: required|accepted

Conditional Logic

Show/hide fields based on toggle state:

handle: notify_me
field:
  type: toggle
  display: Notify me of updates
  default: false

handle: email_for_notifications
field:
  type: text
  input_type: email
  display: Notification Email
  if: notify_me
  validate: required_if:notify_me,true|email

Toggle vs Checkbox

Use Toggle When:

• Immediate effect expected
• On/off state is clear
• Modern UI desired
• Single boolean value

Use Checkbox When:

• Multiple selections needed
• Agreement/consent required
• Traditional form expected
• Part of a list

Best Practices

Labels

• Be clear about what the toggle controls
• Use active voice ("Enable", "Allow", "Show")
• Keep labels concise
• Indicate immediate effect if applicable

Default State

• Set sensible defaults
• Consider user expectations
• Follow privacy-first principles
• Document behavior

Visual Feedback

• Ensure clear on/off indication
• Use animation sparingly
• Maintain good color contrast
• Test with accessibility tools

Mobile Experience

• Ensure adequate touch target size
• Test thumb-friendly positioning
• Verify animation performance
• Check landscape orientation

Examples

Notification Preferences

handle: notification_preferences
field:
  type: section
  display: Notification Preferences

handle: email_notifications
field:
  type: toggle
  display: Email notifications
  default: true

handle: push_notifications
field:
  type: toggle
  display: Push notifications
  default: false

handle: sms_notifications
field:
  type: toggle
  display: SMS notifications
  default: false

Privacy Settings

handle: privacy_settings
field:
  type: section
  display: Privacy Settings

handle: profile_public
field:
  type: toggle
  display: Make my profile public
  default: false

handle: show_email
field:
  type: toggle
  display: Show my email address
  default: false

handle: allow_messages
field:
  type: toggle
  display: Allow messages from other users
  default: true

Feature Toggles

handle: enable_analytics
field:
  type: toggle
  display: Enable analytics
  default: false
  size: large

handle: enable_beta_features
field:
  type: toggle
  display: Enable beta features
  default: false
  color: purple

Terms Acceptance

handle: accept_terms
field:
  type: toggle
  display: I accept the terms and conditions
  validate: required|accepted

Newsletter with Frequency

handle: subscribe_newsletter
field:
  type: toggle
  display: Subscribe to newsletter
  default: false

handle: newsletter_frequency
field:
  type: select
  display: Frequency
  if: subscribe_newsletter
  options:
    daily: Daily
    weekly: Weekly
    monthly: Monthly
  validate: required_if:subscribe_newsletter,true