Steps
EuiSteps presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a title and children to be present and will automatically increment the step number based on the initial firstStepNumber.
Complex steps
If you need to call out a set of substeps that are not lines of code, most likely a <ol/>, wrap the block in a <EuiSubSteps/>.
Heading elements
To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an h2and therefore adds headingElement="h2" to the EuiSteps component.
The style of the title will not be affected.
Steps status
Steps can optionally include status prop that will alter the look of the number prefix. The options are incomplete, complete, warning, danger, disabled and loading. This is used mostly as a final step when you need to make some sort of final check.
Custom title sizes
You can set a different title size using titleSize. If titleSize is set in both EuiSteps and EuiStep, the latter value will override the former. Additionally, the title size xs will automatically generate smaller steps circles.
The title size xxs affects only the size of the accompanying unnumbered step indicator, but not the title itself.
Horizontal steps
For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the status key to denote the user's progress.
For horizontal steps, the status key defaults to "incomplete" and the default filled styling is reserved for indicating "current" status.
Use the size property to generate smaller step circles.
Props
EuiSteps
Prop | Description and type | Default value |
|---|---|---|
Prop steps# | Description and type An array of EuiContainedStepProps[] | Default value Required |
Prop firstStepNumber# | Description and type The number the steps should begin from number | Default value 1 |
Prop headingElement# | Description and type The HTML tag used for the title string | Default value p |
Prop titleSize# | Description and type Title sizing equivalent to EuiTitle, but only "xs" | "s" | "m" | "xxs" | Default value s |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiStep
Prop | Description and type | Default value |
|---|---|---|
Prop title# | Description and type Type: string | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop children# | Description and type ReactNode to render as this component's content ReactNode | Default value |
Prop headingElement# | Description and type The HTML tag used for the title string | Default value p |
Prop step# | Description and type The number of the step in the list of steps number | Default value 1 |
Prop status# | Description and type May replace the number provided in props.step with alternate styling. "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" | Default value |
Prop titleSize# | Description and type Title sizing equivalent to EuiTitle, but only "xs" | "s" | "m" | "xxs" | Default value s |
EuiStepsHorizontal
Prop | Description and type | Default value |
|---|---|---|
Prop steps# | Description and type An array of Omit<EuiStepHorizontalProps, "step">[] | Default value Required |
Prop size# | Description and type Type: "xs" | "s" | "m" | Default value m |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiStepHorizontal
Prop | Description and type | Default value |
|---|---|---|
Prop onClick# | Description and type Type: MouseEventHandler<HTMLButtonElement> | Default value Required |
Prop disabled# | Description and type Makes the whole step button disabled. boolean | Default value |
Prop step# | Description and type The number of the step in the list of steps number | Default value 1 |
Prop title# | Description and type Type: string | Default value |
Prop status# | Description and type Visual representation of the step number indicator. "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" | Default value incomplete |
Prop size# | Description and type Type: "xs" | "s" | "m" | Default value m |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiStepNumber
Prop | Description and type | Default value |
|---|---|---|
Prop status# | Description and type May replace the number provided in props.number with alternate styling "warning" | "danger" | "disabled" | "current" | "loading" | "incomplete" | "complete" | Default value |
Prop number# | Description and type Type: number | Default value |
Prop titleSize# | Description and type Title sizing equivalent to EuiTitle, but only "xs" | "s" | "m" | "none" | Default value s |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
EuiSubSteps
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |