ChecklistItem
A 20px status mark beside Roboto / text-base copy: complete, incomplete or info.
Figma: 10 / Components / ChecklistItemComplete: Connect your Facebook page
Not complete: Add a payment method
Information: Approval takes up to two days
Usage
Source: src/components/ui/checklist-item.tsx
import { ChecklistItem } from '@/components/ui/checklist-item'<ChecklistItem state='complete'>Connect your Facebook page</ChecklistItem>When to use
When to reach for it, and when to use something else.
Use it for
Complete: Setup steps and requirement lists.
Complete: Do and do not lists in guidance.
Avoid
Not complete: Choices people can toggle; use a Checkbox.
ChecklistItem
| Prop | Type | Default | Description |
|---|---|---|---|
| state | 'complete' | 'incomplete' | 'info' | 'complete' | The status mark and its tint. |
