Component

Checklist

An interactive task list with checkbox semantics, strikethrough completion styling, optional item descriptions, and a progress summary — designed for AI-captured action items.

Basic

Click any item to toggle it. Completed items receive a strikethrough and muted text. Pass items + onChange for controlled usage or defaultItems for uncontrolled.

With progress

Pass showProgress to display a "{completed}/{total} completed" summary beneath the list.

2/4 completed

With descriptions

Add a description field to any item for supplementary detail shown beneath the label.

1/3 completed

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { Checklist } from '@refraction-ui/react'
import type { ChecklistItemData } from '@refraction-ui/react'

const ITEMS: ChecklistItemData[] = [
  { id: '1', label: 'Schedule kick-off meeting', checked: true },
  { id: '2', label: 'Prepare agenda', checked: false },
  { id: '3', label: 'Invite stakeholders', checked: false },
]

export function MyComponent() {
  const [items, setItems] = React.useState(ITEMS)

  return (
    <Checklist
      items={items}
      onChange={setItems}
      showProgress
    />
  )
}

Props

PropTypeDefaultDescription
itemsChecklistItemData[]--Controlled list of items.
defaultItemsChecklistItemData[]--Initial items for uncontrolled usage.
onChange(items: ChecklistItemData[]) => void--Called with the updated items array after a toggle.
onItemToggle(id: string) => void--Called with the id of the toggled item.
showProgressbooleanfalseShow a "{completed}/{total} completed" summary below the list.
classNamestring--Additional CSS classes to apply to the container.