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