To-do

Usage

• Use To-do for actionable items that people check off (checklists, meeting actions).
• Pass onCheckedChange to make the checkbox interactive; omit it for a read-only checklist.
• Don’t use To-do for options in a form; use Checkbox instead.
• Don’t use To-do for tracked work with owners and dates; use a database instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { BlockContent, ToDo, rt } from '@krackedui/motion';

export function TodoDemo() {
  const [a, setA] = useState(true);
  const [b, setB] = useState(false);
  return (
    <BlockContent>
      <ToDo text={rt('Write the outline')} checked={a} onCheckedChange={setA} spacing={{ bottom: false }} />
      <ToDo text={rt('Share it for review')} checked={b} onCheckedChange={setB} spacing={{ top: false }} />
    </BlockContent>
  );
}

Examples

Read-only

Without onCheckedChange the checkbox is read-only.

With children

API Reference

ToDo

Based on <div> and supports its props. Adds:

Accessibility

• The box is the Checkbox atom (role="checkbox", aria-checked, label “To-do”); Space toggles it when focused.
• Pass a more specific aria-label through a custom marker if several to-dos need distinct names.