fc-multistep-form

Multi-step form component

Usage

``html

Step 1 - Choose Users

Users

Assaf
Shalom (Yafyuf)
Daniel
David
Gilad
Goldi
Harel
Ori

Language

English
Hebrew
Hipster

Step 2 - Choose a Message

Chill
Kill
Thrill

Step 3 - Confirm

You are about to send the following message:

Recipients:

Message:

Urgency:

Mood:

`

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