Checklist Item

Progress-tracking list row with three states: done (muted, struck through), active (tappable next step), and locked (not yet available). Designed for guided task lists like the Getting Started widget.

Checklist

Create a project(done)

Create a task(done)

Set a due date on a task

Import

import { DsChecklistItem } from '@verkview/design-system'

Usage

<template>
  <ul role="list">
    <li v-for="(action, i) in actions" :key="action.id">
      <DsChecklistItem
        :label="action.label"
        :state="action.done ? 'done' : 'active'"
        @click="goTo(action)"
      />
    </li>
  </ul>
</template>

Props

Prop	Type	Default	Description
label	string	required	Item text
state	'done' | 'active' | 'locked'	required	Visual + interaction state
interactive	boolean	true	Set false for active items that should not navigate anywhere
doneText	string	'done'	Screen-reader suffix announced for done items

Events

Event	Payload	Description
click	-	Emitted only when the item is active and interactive

States

All States

Done — muted with strikethrough(done)

Active but non-interactive

Locked — waiting on previous step

• done — green check, muted text with line-through, non-interactive.
• active — blue play glyph, full-contrast text. Renders as a <button> only when interactive (use :interactive="false" for actions completed passively, e.g. "Delete a task" where guiding the user to a destructive action is poor UX).
• locked — hollow circle at 40% opacity, non-interactive.

Accessibility

• Active interactive items render as native <button> elements; everything else is a <div>, keeping the Tab order limited to actionable rows.
• Done state is announced via a visually-hidden ({doneText}) suffix — never conveyed by colour alone (check icon + strikethrough).
• Locked items carry aria-disabled="true".
• 44px minimum row height for touch.

Used By

• GettingStartedWidget.vue — desktop floating checklist.
• GettingStartedSheet.vue — mobile full-screen checklist sheet.