Studio
2

Task Steps

Composable parts

Use the named parts when rows need a different layout. Root passes the same normalized rows, completed count, total, and summary used by the data-driven form. Indices are truncated and clamped; a failure at completion marks the last row as failed. Empty lists announce “No steps.”

import * as TaskSteps from '@mielui/svelte/components/task-steps';

<TaskSteps.Root {steps} {current}>
  {#snippet children(progress)}
    <TaskSteps.Summary class="text-sm" />
    <TaskSteps.List>
      {#each progress.rows as row (row.id)}
        <TaskSteps.Item status={row.status}>
          <TaskSteps.Meta>{row.meta}</TaskSteps.Meta>
          <TaskSteps.Label>{row.label}</TaskSteps.Label>
        </TaskSteps.Item>
      {/each}
    </TaskSteps.List>
  {/snippet}
</TaskSteps.Root>

Installation

pnpm dlx @mielui/svelte add task-steps

Usage

Set current to the running step. Values before it are complete; the array length means the whole run is complete.

Completion markers use a subtle scale and opacity change; task progress remains readable during rapid updates.

import { TaskSteps } from '@mielui/svelte/components/task-steps';

<TaskSteps
  steps={[{ id: 'build', label: 'Building' }, { id: 'test', label: 'Testing' }]}
  current={1}
  label="Deploy progress"
/>

Examples

Bare

Recover a failed step

Keep current at the failed step and set failed. Clear failed when retry begins, then advance current only after the operation succeeds. Reaching steps.length marks the sequence complete; the component never runs the operation itself.

API reference

TaskSteps.Indicator

Prop Type Default
status TaskStepStatus | undefined —

TaskSteps.Item

Prop Type Default
status TaskStepStatus | undefined 'pending'

TaskSteps.Label

TaskSteps.List

TaskSteps.Meta

TaskSteps.Summary

Prop Type Default
children Snippet<[TaskStepsState]> | undefined —

TaskSteps

Narrates ordered asynchronous work.

Prop Type Default
children Snippet<[TaskStepsState]> | undefined —
steps Required TaskStep[] —
current Required number —
failed boolean | undefined false
label string | undefined 'Task progress'
class (string & (ClassValue | null)) | undefined —