Wizard

Numbered steps, with the ones behind you marked done.

import { Wizard } from '@textui/core';

<Wizard
  steps={[
    { id: 'source', label: 'Source' },
    { id: 'review', label: 'Review' },
  ]}
  activeId="review"
  completedIds={['source']}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | steps | WizardStep[] | required | | | activeId | string | required | | | completedIds | string[] | [] | Steps already completed. | | orientation | 'horizontal' \| 'vertical' | 'horizontal' | |

Plus everything on BoxProps.

The indicator only. It shows where you are in a sequence; it holds no step content and enforces no order, so the screen decides what a step contains and whether you may skip one.

orientation="vertical" runs it down the side, which fits a narrow terminal better once there are more than about four steps.

See also

• Tabs - when the order does not matter
• Form - what a step usually holds