Build multi-step wizard and stepper components with progress indicators and step validation.
A stepper turns a long form into a visible sequence: numbered circles on a track that say where the user is and how much is left. This tool builds that component from a plain step list. You name each step, add the inputs and validation rules it needs, and the designer renders the progress track, the complete/current/upcoming states, and the Back and Next controls. The surprise for most people is how much behavior is derived: nothing typed on later steps matters until the current step's rules pass, and the progress fill is simply completed steps divided by total steps.
A concrete input and expected output from the current implementation.
Input
Steps: 'Contact details', 'Payment', 'Review'. Step 1 has an email input with a rule that it must match a basic email format.
Expected output
Three numbered circles joined by a track. Step 1 starts current with Next disabled while the email is empty or malformed; a valid address such as [email protected] enables Next. Advancing marks step 1 complete with a checkmark and fills the track to one third. Step 2 gates the same way, and completing it brings the fill to two thirds (67%).
The fill is completed steps over total steps, so 1 of 3 gives one third and 2 of 3 gives two thirds. The Next button is gated by the current step's rules, which is why nothing advances until the email validates.
Each step is an ordered entry with a title, an optional description, and its own set of inputs with validation rules. The tool derives three visual states from validation results: completed (a filled circle with a checkmark), current (the step being edited), and upcoming. Adding, reordering, or deleting a step re-derives the numbering, the states, and the progress fill from the new list.
Rules are evaluated as the user types rather than on submit. Next stays disabled until every rule on the current step passes, so an empty required input blocks progress while an empty optional one does not. If the user returns to a completed step and edits an input, the state is re-evaluated against the rules and can drop back from completed to current.
Because rules evaluate live, and the whole current step must pass. An email rule rejects 'ada@example' (no domain) and 'notanemail' just as firmly as an empty field. Check which input carries the error, and confirm the failing rule belongs to the step you are on, not a later one.
Completed steps divided by total steps. In a 5-step flow, finishing the first two fills the track to 40%. The current step counts only once it is completed, so the bar reads low early on even when the remaining work is small.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.