Onboarding Checklist
FeedbackStep-by-step onboarding checklist with progress tracking and completion state.
Onboarding ChecklistFeedback · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Onboarding Checklist from @otfdashkit/ui.
Code
// Onboarding Checklist — Step-by-step onboarding checklist with progress tracking and completion state.
//
// Install:
// bun add @otfdashkit/ui
import { OnboardingChecklist } from '@otfdashkit/ui'
export function Example() {
return (
<OnboardingChecklist>
{/* your content */}
</OnboardingChecklist>
)
}Props
Props declared in the Checklist source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| collapsible | boolean | true | Whether the body is collapsible. Default true. |
| completed | Record<string, boolean> | Controlled map of itemId → completed. If omitted, state is internal. | |
| defaultOpen | boolean | true | Initial open state (uncontrolled). Default true. |
| description | string | Optional subtitle / description. | |
| hideProgress | boolean | false | Hide the progress bar. Default false. |
| onComplete | () => void | Fired the first time every item flips to completed. | |
| onItemChange | (id: string, completed: boolean) => void | Called when an item's completion changes. | |
| title | string | 'Getting started' | Header title. |