Stimulus Form Progress Bar

A Stimulusjs controller to help with displaying progress when a user is filling out forms.

Checkout the demo

Install

You must have StimulusJS already installed.

``
yarn add stimulus-form-progress-bar
`

or


`
npm install stimulus-form-progress-bar
`
or use directly from unpkg:


`


`


Next you have to initialize StimulusJS and import the Stimulus Form Progress Bar

`
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller\.js$/)
application.load(definitionsFromContext(context))

import { ProgressBar } from 'stimulus-form-progress-bar'
application.register('progress-bar', ProgressBar)
`

Basic Usage

Add the relevant markup to get started. Note this example uses TailwindCSS.

Note you need a bar target and each input element except radio buttons need a required attribute.

1. Add data-controller to the parent div
2. Add data-progress-bar-target='bar' to your progress bar with a width of 0

`