Flows
Components
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with 💙 by Pablo Armenv2.1.19

/
/
Home
/Patterns
/256. Modal Blackout w/ Forms & Steps

Modal Blackout w/ Forms & Steps

 DesktopOnboardingDecision MakingAccessibility

Generated Description

This modal blackout pattern guides users through multi-step forms, ensuring focused input and clear progression for critical decisions.

View more...

Pattern Metadata

Released: Jul 10, 2021

Updated: May 28, 2026

Version: 2.1.19

Was this useful?

Export components

BETA

This pattern is ready to use on your codebase.

Sign in to preview and download component code for 256. Modal Blackout w/ Forms & Steps.

Device (Tabs)
Desktop
System (OS)
Web
Language (i18n)
Español
English
Description
This modal blackout pattern guides users through multi-step forms, ensuring focused input and clear progression for critical decisions.
VotesUp
VotesDown
Pattern ID
256
UX Flows
Onboarding
Decision Making
Accessibility
UI Components
Modal
Button
Steps
Dropdown Menu
Text Input
Image / Illustration
Close Overlay
Version
2.1.19
Facebook BusinessTwitterFigma WebFigma DesktopRelated patterns

Facebook Business

HD and full length on Youtube
HD and full length on Youtube

Twitter

notion image
 

Figma Web

notion image
notion image
notion image
notion image

Figma Desktop

 
notion image
notion image
notion image
notion image
notion image
notion image
 

Related patterns

  • 192. Modal w/ Actions
  • 378. Modal Blackout w/ Animation
  • 316. Modal Blackout for Delete Confirmation
  • 241. Modal Blackout w/ Steps
  • 319. Modal Blackout w/ Multiple Choice
  • 357. Modal w/ Steps & Animation (No blackout)
 

Still searching?

Tell us what's missing, and we'll help you find it.

Send feedback