@forter/multistep-form

fc-multistep-form

Multi-step form component

Usage

<fc-multistep-form>
   <fieldset id="users-step">
     <h2>Step 1 - Choose Users</h2>

     <section id="users-checks">
       <h2>Users</h2>
       <fc-checkbox>Assaf</fc-checkbox>
       <fc-checkbox>Shalom (Yafyuf)</fc-checkbox>
       <fc-checkbox>Daniel</fc-checkbox>
       <fc-checkbox>David</fc-checkbox>
       <fc-checkbox>Gilad</fc-checkbox>
       <fc-checkbox>Goldi</fc-checkbox>
       <fc-checkbox>Harel</fc-checkbox>
       <fc-checkbox>Ori</fc-checkbox>
     </section>

     <section id="users-filter">
       <h2>Language</h2>
       <fc-checkbox checked data-lang="en">English</fc-checkbox>
       <fc-checkbox checked data-lang="he">Hebrew</fc-checkbox>
       <fc-checkbox checked data-lang="hp">Hipster</fc-checkbox>
     </section>
   </fieldset>

   <fieldset id="message-step">
     <h2>Step 2 - Choose a Message</h2>

     <fc-textarea label="Message"></fc-textarea>

     <fc-dropdown label="Mood" trigger-label="Mood">
       <fc-dropdown-item>Chill</fc-dropdown-item>
       <fc-dropdown-item>Kill</fc-dropdown-item>
       <fc-dropdown-item>Thrill</fc-dropdown-item>
     </fc-dropdown>

     <fc-radio-group name="urgency">
       <fc-radio label="Urgent" value="urgent"></fc-radio>
       <fc-radio label="Leisurely" value="leisurely"></fc-radio>
     </fc-radio-group>
   </fieldset>

   <fieldset>
     <h2>Step 3 - Confirm</h2>
     <p>You are about to send the following message:</p>
     <dl>

       <dt>Recipients:</dt>
       <dd><output data-value="users"></output></dd>

       <dt>Message:</dt>
       <dd><output data-value="message"></output></dd>

       <dt>Urgency:</dt>
       <dd><output data-value="urgency"></output></dd>

       <dt>Mood:</dt>
       <dd><output data-value="mood"></output></dd>

     </dl>
   </fieldset>

</fc-multistep-form>

Properties

Property	Attribute	Type	Default	Description
autoFocus	auto-focus	boolean	false	Whether the form should auto focus
backLabel	back-label	string	"Back"	The label for the 'back' button
cancelLabel	cancel-label	string	"Cancel"	The label for the 'cancel' button
disabled	disabled	boolean	false	Whether the element is disabled
form		any
intent	intent	string	"apply"	The intent for the 'submit' button
nextLabel	next-label	string	"Next"	The label for the 'next' button
step	step	number
submitButton		any
submitHidden		any
submitLabel	submit-label	string	"Submit"	The label for the 'submit' button

Events

Event	Description
cancel	when the user cancels
next-step	when the step decrements
previous-step	when the step increments
reset	when the user resets
step-changed	whenever the step changes
submit	when the user submits

Slots

Name	Description
	content
header	form header for all steps

CSS Custom Properties

Property	Description
--fc-multistep-form-actions-padding	default: 18px
--fc-multistep-form-counter-size	default: 23px
--fc-multistep-form-padding	default: 23px 0
--rule-color	default: var(--fc-gray-100)
--step-background-color	default: var(--cyan-5)
--step-border-background-color	default: var(--fc-multistep-form-background-color, inherit)
--step-color	default: var(---fc-gray-600)
--step-inner-border-color	default: var(--fc-gray-600)
--step-outer-border-color	default: var(--fc-gray-100)