@forter/multistep-form NPM

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)`