@molecule/app-checklist-react

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Onboarding checklist with checkboxes and overall progress bar.

Exports <Checklist> and ChecklistItem type.

Quick Start

import { Checklist } from '@molecule/app-checklist-react'

;<Checklist
  title="Getting started"
  items={[
    { id: 'profile', label: 'Complete your profile', completed: true },
    { id: 'invite', label: 'Invite a team member', completed: false },
    { id: 'project', label: 'Create your first project', completed: false },
  ]}
  onToggle={(id, next) => updateItem(id, next)}
/>

Type

feature

Installation

npm install @molecule/app-checklist-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

ChecklistItem

A single item in the checklist, tracking its label, description, and completion state.

interface ChecklistItem {
  id: string
  label: ReactNode
  /** Optional description / hint shown under the label. */
  description?: ReactNode
  /** Completion state. */
  completed: boolean
  /** When true, the item is rendered disabled and uncheckable. */
  disabled?: boolean
}

ChecklistProps

Props for {@link Checklist}.

interface ChecklistProps {
  items: ChecklistItem[]
  /** Called when an item is toggled. */
  onToggle: (id: string, next: boolean) => void
  /** Show overall progress bar above the list. Defaults to true. */
  showProgress?: boolean
  /** Optional title above the checklist. */
  title?: ReactNode
  /** Extra classes. */
  className?: string
}

Functions

Checklist(props)

Onboarding-style checklist with checkboxes, optional descriptions, and an overall progress bar derived from items.

function Checklist({
  items,
  onToggle,
  showProgress = true,
  title,
  className,
}: ChecklistProps): JSX.Element

• props — Component props (see {@link ChecklistProps}).

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-react ^1.0.1
• @molecule/app-ui ^1.0.1
• @molecule/app-ui-react ^1.0.1
• react ^18.0.0 || ^19.0.0

Runtime Dependencies

• @molecule/app-react
• @molecule/app-ui
• @molecule/app-ui-react
• react

The progress line uses the i18n key checklist.progress with an English defaultValue; no companion locale bond ships this key, so add it to your app's locale resources for non-English UIs. label/description are consumer-provided ReactNodes — pass translated strings via t(). The component is fully controlled: it never mutates completed; persist the toggle in onToggle(id, next) and re-render with updated items.