@tour-kit/checklistsComponents
ChecklistTask
ChecklistTask component: individual task item with checkbox, label, description, completion state, and action button
ChecklistTask
Component for rendering individual checklist tasks with checkboxes, icons, and state indicators.
Usage
import { ChecklistTask, useTask } from '@tour-kit/checklists';
function TaskList() {
const { task } = useTask('onboarding', 'step1');
return <ChecklistTask task={task} />;
}Props
Prop
Type
Examples
Basic Task
const { task } = useTask('onboarding', 'step1');
<ChecklistTask task={task} />With Click Handler
const { task, execute } = useTask('onboarding', 'step1');
<ChecklistTask
task={task}
onClick={execute}
/>Custom Icon
<ChecklistTask
task={task}
renderIcon={(task) => (
task.completed ? <CheckCircle /> : <Circle />
)}
/>Different Variants
<ChecklistTask task={task} variant="compact" size="sm" />
<ChecklistTask task={task} variant="detailed" />Task States
The component automatically shows different states:
- Completed: Check icon, strikethrough text
- Locked: Lock icon, disabled appearance
- Active: Highlight border
- Hidden: Not rendered