Slide To Confirm Bundle

⭐ Found this useful? Give it a star on GitHub so more developers can find it.

Symfony FormType for slide-to-confirm / swipe-to-submit — a submit control that must be dragged to the end of a track before the form is posted. Same family as PhoneInput, PasswordToggle, and SelectAllChoice: a drop-in field type, Twig themes, Stimulus or a standalone script. For Symfony 6, 7 and 8 · PHP 8.2+.

This bundle is FrankenPHP worker mode friendly.

Table of contents

• Quick search terms
• Features
• Installation
• Requirements
• Configuration
• Usage
• Use cases
• Demo
• Development
• Documentation
• Tests and coverage
• License
• Author

Quick search terms

Looking for Symfony slide to confirm, swipe to submit form type, slide to pay Symfony, slide to delete account, iOS slide to unlock form, Stimulus swipe submit, SlideToConfirmType, SwipeToSubmitType? You're in the right place.

Features

• ✅ SlideToConfirmType — checkbox-backed slider; completing the swipe confirms and optionally submits
• ✅ SwipeToSubmitType — semantic alias for “this field is the submit”
• ✅ Named profiles — default, payment, danger, legal, publish, gate (REQ-CFG-001)
• ✅ Use cases — payments, irreversible deletes, publish/go-live, legal consent, subscription cancel, batch approve, emergency logout, gate-then-submit (see docs/USE-CASES.md)
• ✅ Keyboard and RTL — slider role, arrows, Home/End, pointer + touch
• ✅ Track fill — the travelled portion of the track uses the same colour as the thumb
• ✅ Server validation — required fields add IsTrue; an incomplete POST is invalid
• ✅ Works with or without Stimulus — built IIFE + MutationObserver, or a Stimulus controller
• ✅ TypeScript + Vite + pnpm — bundle IIFE is built with Vite; the Symfony 8 demo uses Pentatrion Vite (pentatrion/vite-bundle + vite-plugin-symfony) and pnpm only
• ✅ Compatible with Symfony 7 and 8 and FrankenPHP

Installation

composer require nowo-tech/slide-to-confirm-bundle

1. Register the bundle in config/bundles.php:

<?php

return [
  // ...
  Nowo\SlideToConfirmBundle\NowoSlideToConfirmBundle::class => ['all' => true],
];

2. Form theme: The bundle automatically adds its form theme from the form_theme option (see Configuration). Set form_theme in config/packages/nowo_slide_to_confirm.yaml to match your app (e.g. bootstrap_5_layout.html.twig).

3. Include the frontend assets using the named asset package:

<link rel="stylesheet" href="{{ asset(nowo_slide_to_confirm_asset_path('slide-to-confirm.css'), nowo_slide_to_confirm_asset_package()) }}">
<script src="{{ asset(nowo_slide_to_confirm_asset_path('slide-to-confirm.js'), nowo_slide_to_confirm_asset_package()) }}" defer></script>

4. (Optional) Translations — domain NowoSlideToConfirmBundle with the seven required locales (en, es, it, fr, pt, de, nl).

Full steps: docs/INSTALLATION.md.

Requirements

• PHP >= 8.1
• Symfony 6, 7 or 8 (^6.0 || ^7.0 || ^8.0), including the mandatory floor 7.4, 8.0, and 8.1
• Stimulus optional — use the built script, or register the controller
• Vite to rebuild assets (or use the pre-built files in src/Resources/public)

Configuration

nowo_slide_to_confirm:
  default_profile: default
  form_theme: 'form_div_layout.html.twig'
  translation_domain: NowoSlideToConfirmBundle
  debug: false
  profiles:
    default:
      text: form.slide_to_confirm
      confirmed_text: form.confirmed
      variant: default
      threshold: 0.85
      submit_on_confirm: true
      reset_on_release: true

See docs/CONFIGURATION.md for built-in profiles and Symfony form themes.

Usage

use Nowo\SlideToConfirmBundle\Form\Type\SlideToConfirmType;
use Symfony\Component\Form\Extension\Core\Type\MoneyType;

$builder
    ->add('amount', MoneyType::class, ['currency' => 'EUR'])
    ->add('confirm', SlideToConfirmType::class, [
        'profile' => 'payment',
    ]);

Render with a child loop (no extra submit button unless you use profile gate):

{{ form_start(form) }}
    {% for child in form %}
        {% if not child.rendered %}
            {{ form_row(child) }}
        {% endif %}
    {% endfor %}
{{ form_end(form) }}

On a valid POST, confirm is mapped: false by default — read $form->get('confirm')->getData() (boolean). Full FormType + controller walkthrough: docs/USAGE.md.

Use cases

Case	Profile	How to use
Pay / send money	payment	SlideToConfirmType after amount + IBAN
Delete / wipe	danger	Ack checkbox + slide
Publish / go live	publish	Slide replaces “Publish”
Accept terms	legal	Store contract version on valid POST
Cancel subscription	danger	Custom text / confirmed_text
Approve batch	payment	SwipeToSubmitType with a count in the label
Sign out everywhere	danger	Invalidate sessions after isValid()
Unlock then submit	gate	Slide enables a SubmitType (no auto-POST)

use Nowo\SlideToConfirmBundle\Form\Type\SlideToConfirmType;
use Nowo\SlideToConfirmBundle\Form\Type\SwipeToSubmitType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

// Destructive
$builder->add('confirm', SlideToConfirmType::class, ['profile' => 'danger']);

// Batch submit (this field *is* the submit)
$builder->add('confirm', SwipeToSubmitType::class, [
    'profile' => 'payment',
    'text'    => sprintf('Slide to approve %d payments', $count),
]);

// Gate: unlock a regular button
$builder
    ->add('unlock', SlideToConfirmType::class, ['profile' => 'gate'])
    ->add('save', SubmitType::class);

Copy-paste FormTypes and controllers for all eight cases: docs/USE-CASES.md. Quick snippets: docs/USAGE.md. Demo: ?case=payment (and delete, publish, legal, cancel, batch, emergency, gate).

Demo

The Symfony 8.1 demo is in demo/symfony8. Run from the bundle root: make up-symfony8 (http://localhost:8055). See demo/README.md.

The demos use FrankenPHP. Default FRANKENPHP_MODE=worker (Caddyfile with worker { file; watch }). Set FRANKENPHP_MODE=classic for per-request PHP so Twig/asset changes show on refresh (see docs/DEMO-FRANKENPHP.md).

Development

Run tests and QA with Docker: make up && make install && make test (or make test-coverage, make qa). Without Docker: composer install && composer test. See Makefile for all targets.

Documentation

• Installation
• Configuration
• Usage
• Contributing
• Code of Conduct
• Changelog
• Upgrading
• Release
• Security
• Engram
• Spec-driven development
• GitHub Spec Kit

Additional documentation

• Use cases — payments, deletes, legal, gate, and copy-paste FormTypes
• Theming — CSS tokens, form themes, template overrides
• Demo with FrankenPHP
• GitHub Actions CI requirements
• PSR evaluation (REQ-CS-007)
• GitHub About fields

Tests and coverage

• Tests: PHPUnit (PHP), Vitest (TS/JS)
• PHP: 100%
• TS/JS: 100%

License

The MIT License (MIT). Please see LICENSE for more information.

Author

Created by Nowo.tech