npm package: @forter/multistep-form
Description: multistep-form from Forter Components
Author: Forter Developers
Latest version: 2.2.1

# fc-multistep-form

Multi-step form component
<!-- Author: Benny Powers <benny.powers@forter.com> -->

## Usage
```html
<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)`                    |