MenuCaderno UI
npmGitHub
Theme

<cad-steps> family

Steps

Show the stages of a process and which are complete, current, or pending.

Project setup

Create project

Start a new project and define the scope.2 minDone

Invite collaborators

Add people who will work on this project.1 minCurrent

Configure settings

Set permissions, workflows, and integrations.3–5 minPending

Review and launch

Check names and permissions, then publish.2 minPending

Horizontal layout

Switches to vertical in narrow containers.

Release sequence

Outline the change.Check the examples.Fix the failing tests.Release the package.

States and slots

States are complete, current, pending, disabled, warning, and error. Use slots for the title, content, metadata, status, or a custom marker.

Orientation

Vertical is the default. Horizontal suits short sequences and switches to vertical in narrow containers. Steps shows progress; it does not navigate or expand content.

API reference: <cad-steps>

labellabelstring'Steps'orientationorientationCadStepsOrientation'vertical'labelstringlabelnoorientationCadStepsOrientationorientationyes(default)Direct `cad-step` children.listAccessible list container.

API reference: <cad-step>

statusstatusCadStepStatus'pending'status-labelstatusLabelstring''titletitlestring''valuevaluestring''indexnumber—nosetSizenumber—nostatusCadStepStatusstatusyesstatusLabelstringstatus-labelnotitlestringtitlenovaluestringvalueno(default)Step description or custom content.markerOptional marker override.metaSupporting duration, owner, or timing.statusOptional visible status label.titleVisible title. Falls back to `title`.contentStep content.connectorDecorative line to the next step.itemAccessible list item.markerStatus and order marker.metaSupporting metadata.statusVisible status label container.titleStep title.--cad-step-accentPer-instance state color.--cad-step-trackPer-instance connector color.

Accessibility

Steps exposes a list and marks the current item with aria-current="step". Translate status-label for each state. For navigation use Tabs or Breadcrumb; for disclosure use Accordion.

MIT licensed. Built with Caderno UI.Report an issue
Back to top