# Stepper
**Also known as:** Steps, Wizard, ProgressSteps
## Description
The Stepper component shows the steps of a process in their order - the ones done, the one the user is on and the ones still to come - horizontally or vertically, and lets the user go to a step by clicking it. What each step shows, and the buttons that move between them, are the page's.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| ChildContent | `RenderFragment?` | null | The content of the BitStepper, that are BitStepperOption components. |
| Classes | `BitStepperClassStyles?` | null | Custom CSS classes for the different parts of the stepper. |
| CompletedIcon | `BitIconInfo?` | null | The icon shown in the indicator of a completed step, using custom CSS classes for external icon libraries. Takes precedence over CompletedIconName. |
| CompletedIconName | `string?` | null | The name of the icon shown in the indicator of a completed step, from the built-in Fluent UI icons. Defaults to "CheckMark". |
| CurrentIndex | `int` | 0 | The index of the current step. The steps before it are completed and the ones after it are upcoming; an index past the last step shows every step completed, and a negative one shows none started. Two-way bindable. |
| ErrorIcon | `BitIconInfo?` | null | The icon shown in the indicator of a step in error, using custom CSS classes for external icon libraries. Takes precedence over ErrorIconName. |
| ErrorIconName | `string?` | null | The name of the icon shown in the indicator of a step in error, from the built-in Fluent UI icons. Defaults to "ErrorBadge". |
| Items | `IEnumerable<TItem>` | [] | The steps of the stepper. |
| Linear | `bool` | false | Keeps the user from skipping ahead: only the steps before the current one (and the current one) can be clicked, so a step is reached only by the page moving CurrentIndex forward. |
| NameSelectors | `BitStepperNameSelectors<TItem>?` | null | The names (or selectors) of the members the steps are read from, for items of a custom class. |
| OnChange | `EventCallback<int>` | | The callback for when the user goes to another step, with its index. It runs even when CurrentIndex is bound one way and could not be written back. |
| OnItemClick | `EventCallback<TItem>` | | The callback for when a step is clicked, the current one included, as long as it can be gone to. |
| Options | `RenderFragment?` | null | Alias of ChildContent: the steps declared as BitStepperOption components. |
| ReadOnly | `bool` | false | Only shows where the process is: no step can be clicked. |
| Styles | `BitStepperClassStyles?` | null | Custom CSS styles for the different parts of the stepper. |
| Vertical | `bool` | false | Lays the steps out from top to bottom instead of from start to end. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitStepperItem Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaLabel | `string?` | null | The aria-label of a step that can be clicked, which replaces its text, description and state as what a screen reader names it by. |
| Class | `string?` | null | The custom CSS classes of the step. |
| Description | `string?` | null | A second line of text under the text of the step. |
| Icon | `BitIconInfo?` | null | The icon shown in the indicator of the step in place of its number, using custom CSS classes for external icon libraries. Takes precedence over IconName. A step in error shows the error icon instead, and a completed step the completed icon. |
| IconName | `string?` | null | The name of the icon shown in the indicator of the step in place of its number, from the built-in Fluent UI icons. |
| IsDisabled | `bool` | false | Whether the step is disabled: it cannot be gone to, and is drawn dimmed. |
| IsError | `bool` | false | Whether the step is in error, shown with the error icon and color whatever the position of the step. |
| Key | `string?` | null | A unique value to use as the key of the step. |
| OnClick | `Action<BitStepperItem>?` | null | The click handler of the step, run when it is clicked and it can be gone to. |
| Style | `string?` | null | The custom CSS styles of the step. |
| Text | `string?` | null | The text of the step. |
| Title | `string?` | null | The title (tooltip) of the step. |
### BitStepperOption Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaLabel | `string?` | null | The aria-label of a step that can be clicked, which replaces its text, description and state as what a screen reader names it by. |
| Class | `string?` | null | The custom CSS classes of the step. |
| Description | `string?` | null | A second line of text under the text of the step. |
| Icon | `BitIconInfo?` | null | The icon shown in the indicator of the step in place of its number, using custom CSS classes for external icon libraries. Takes precedence over IconName. |
| IconName | `string?` | null | The name of the icon shown in the indicator of the step in place of its number, from the built-in Fluent UI icons. |
| IsDisabled | `bool` | false | Whether the step is disabled: it cannot be gone to, and is drawn dimmed. |
| IsError | `bool` | false | Whether the step is in error, shown with the error icon and color whatever the position of the step. |
| Key | `string?` | null | A unique value to use as the key of the step. |
| OnClick | `EventCallback<BitStepperOption>` | | The click handler of the step, run when it is clicked and it can be gone to. |
| Style | `string?` | null | The custom CSS styles of the step. |
| Text | `string?` | null | The text of the step. |
| Title | `string?` | null | The title (tooltip) of the step. |
### BitStepperNameSelectors Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| AriaLabel | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.AriaLabel)) | The AriaLabel field name and selector of the custom input class. |
| Class | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Class)) | The CSS Class field name and selector of the custom input class. |
| Description | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Description)) | The Description field name and selector of the custom input class. |
| Icon | `BitNameSelectorPair<TItem, BitIconInfo?>` | new(nameof(BitStepperItem.Icon)) | The Icon field name and selector of the custom input class. |
| IconName | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.IconName)) | The IconName field name and selector of the custom input class. |
| IsDisabled | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitStepperItem.IsDisabled)) | The IsDisabled field name and selector of the custom input class. |
| IsError | `BitNameSelectorPair<TItem, bool>` | new(nameof(BitStepperItem.IsError)) | The IsError field name and selector of the custom input class. |
| Key | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Key)) | The Key field name and selector of the custom input class. |
| OnClick | `BitNameSelectorPair<TItem, Action<TItem>?>` | new(nameof(BitStepperItem.OnClick)) | The OnClick field name and selector of the custom input class. |
| Style | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Style)) | The CSS Style field name and selector of the custom input class. |
| Text | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Text)) | The Text field name and selector of the custom input class. |
| Title | `BitNameSelectorPair<TItem, string?>` | new(nameof(BitStepperItem.Title)) | The Title field name and selector of the custom input class. |
### BitNameSelectorPair Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Name | `string` | | Custom class property name. |
| Selector | `Func<TItem, TProp?>?` | | Custom class property selector. |
### BitStepperClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element (the list of steps) of the BitStepper. |
| Step | `string?` | null | Custom CSS classes/styles for each step of the BitStepper. |
| CompletedStep | `string?` | null | Custom CSS classes/styles for each completed step of the BitStepper. |
| CurrentStep | `string?` | null | Custom CSS classes/styles for the current step of the BitStepper. |
| UpcomingStep | `string?` | null | Custom CSS classes/styles for each upcoming step of the BitStepper. |
| ErrorStep | `string?` | null | Custom CSS classes/styles for each step of the BitStepper that is in error. |
| Button | `string?` | null | Custom CSS classes/styles for the part of each step of the BitStepper that is clicked. |
| Indicator | `string?` | null | Custom CSS classes/styles for the indicator (the circle with the number or icon) of each step of the BitStepper. |
| Icon | `string?` | null | Custom CSS classes/styles for the icon in the indicator of each step of the BitStepper. |
| Number | `string?` | null | Custom CSS classes/styles for the number in the indicator of each step of the BitStepper. |
| Label | `string?` | null | Custom CSS classes/styles for the container of the text and description of each step of the BitStepper. |
| Text | `string?` | null | Custom CSS classes/styles for the text of each step of the BitStepper. |
| Description | `string?` | null | Custom CSS classes/styles for the description of each step of the BitStepper. |
| Connector | `string?` | null | Custom CSS classes/styles for the line connecting each step of the BitStepper to the next one. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-Stepper-indicator-size` | 2rem | Diameter of the indicator of a step. |
| `--bit-Stepper-active-color` | var(--bit-clr-pri) | Fill of the indicator of the completed and current steps, and of the line after a completed step. |
| `--bit-Stepper-active-text-color` | var(--bit-clr-pri-text) | Number and icon color on the active fill. |
| `--bit-Stepper-error-color` | var(--bit-clr-err) | Fill of the indicator, and color of the text, of a step in error. |
| `--bit-Stepper-connector-color` | var(--bit-clr-brd-sec) | Color of the line between two steps. |
| `--bit-Stepper-connector-width` | var(--bit-shp-brd-width-thick) | Thickness of the line between two steps. |
## Examples
Item
Custom
Option
\n**Basic**:
```razor
Back
@(basicIndex < basicItems.Count - 1 ? "Next" : "Finish")
```
```csharp
private int basicIndex;
private readonly List basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**Vertical**:
```razor
basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**Description & icon**:
```razor
iconItems =
[
new() { Text = "Account", Description = "Your details", IconName = BitIconName.Contact },
new() { Text = "Address", Description = "Where to ship", IconName = BitIconName.Home },
new() { Text = "Payment", Description = "Card or transfer", IconName = BitIconName.PaymentCard },
new() { Text = "Review", Description = "Check and confirm", IconName = BitIconName.CheckList }
];
```
\n**Linear**:
```razor
Back
Next
```
```csharp
private int linearIndex;
private readonly List basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**ReadOnly**:
```razor
basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**Error & disabled**:
```razor
errorItems =
[
new() { Text = "Account" },
new() { Text = "Address", Description = "The postal code is not valid", IsError = true },
new() { Text = "Payment" },
new() { Text = "Gift wrap", Description = "Not available for this order", IsDisabled = true },
new() { Text = "Review" }
];
private readonly List basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**Events**:
```razor
basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**External Icons**:
```razor
externalIconItems1 =
[
new() { Text = "Account", Icon = "fa-solid fa-user" },
new() { Text = "Address", Icon = BitIconInfo.Fa("solid house"), IsError = true },
new() { Text = "Payment", Icon = BitIconInfo.Fa("solid credit-card") },
new() { Text = "Review", Icon = BitIconInfo.Fa("solid list-check") }
];
private readonly List externalIconItems2 =
[
new() { Text = "Account", Icon = BitIconInfo.Bi("person") },
new() { Text = "Address", Icon = BitIconInfo.Bi("house") },
new() { Text = "Payment", Icon = BitIconInfo.Bi("credit-card") },
new() { Text = "Review", Icon = BitIconInfo.Bi("card-checklist") }
];
```
\n**Style & Class**:
```razor
basicItems =
[
new() { Text = "Account" },
new() { Text = "Address" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
private readonly List styleClassItems =
[
new() { Text = "Account", Style = "--bit-Stepper-active-color: seagreen;" },
new() { Text = "Address", Class = "custom-item" },
new() { Text = "Payment" },
new() { Text = "Review" }
];
```
\n**RTL**:
```razor
rtlItems =
[
new() { Text = "حساب کاربری" },
new() { Text = "آدرس" },
new() { Text = "پرداخت" },
new() { Text = "بازبینی" }
];
```
@(basicIndex < basicItems.Count ? $"Content of step {basicIndex + 1}" : "All steps are done")
Clicked step: @eventsClicked
Asked for step: @(eventsChange + 1), current step: @(eventsIndex + 1)
```
```csharp
private int eventsIndex;
private int eventsChange;
private string? eventsClicked;
private readonly List