Step

A single step to be used in a parent steps component.

<tw-steps>
  <tw-step active></tw-step>
  <tw-step></tw-step>
  <tw-step></tw-step>
</tw-steps>

<tw-steps>
  <tw-step label="Start" active></tw-step>
  <tw-step label="Details"></tw-step>
  <tw-step label="Summary"></tw-step>
</tw-steps>

<tw-steps>
  <tw-step show-label label="Start" active></tw-step>
  <tw-step show-label label="Details"></tw-step>
  <tw-step show-label label="Summary"></tw-step>
</tw-steps>

<tw-steps>
  <tw-step show-label label="Start" completed></tw-step>
  <tw-step show-label label="Details" active></tw-step>
  <tw-step show-label label="Summary"></tw-step>
</tw-steps>

<tw-steps>
  <tw-step show-label label="Start" completed clickable></tw-step>
  <tw-step show-label label="Details" clickable active></tw-step>
  <tw-step show-label label="Summary"></tw-step>
</tw-steps>

Properties

Property	Attribute	Description	Type	Default
`active`	`active`	Controls whether the step is active.	`boolean`	`false`
`label`	`label`	The label of the step.	`string \| undefined`
`showLabel`	`show-label`	Controls whether to show the label.	`boolean`	`false`
`number`	`number`	The number of the step, as potentially set by the parent Steps component.	`number \| undefined`
`completed`	`completed`	Controls whether the step has been completed.	`boolean`	`false`
`clickable`	`clickable`	Controls whether the step is clickable.	`boolean`	`false`

Twikit

Twikit

Step

Properties