Subtask

Task belonging to another task.

html

<details class="subtask" open style="border-left-color: #A8E6C1;">
  <summary class="subtask__summary">Launch checklist</summary>
  <ul class="subtask__list">
    <li><label><input type="checkbox" checked><span>Design review complete</span></label></li>
    <li><label><input type="checkbox" checked><span>Write release notes</span></label></li>
    <li><label><input type="checkbox" ><span>QA sign-off</span></label></li>
    <li><label><input type="checkbox" ><span>Notify stakeholders</span></label></li>
  </ul>
  <p class="subtask__count">Progress: <span class="subtask__count-num"></span> of 4 subtasks complete</p>
</details>
<style>
.subtask { counter-reset: done 0; font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 380px; padding: 16px 18px; border-radius: 8px; border-left: 4px solid; box-shadow: 0 4px 14px rgba(36,20,48,.1); }
.subtask__summary { font-weight: 700; cursor: pointer; font-size: 15px; }
.subtask__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subtask__list label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.subtask__list input { width: 16px; height: 16px; accent-color: #A8E6C1; }
.subtask__list input:checked { counter-increment: done 1; }
.subtask__list input:checked + span { text-decoration: line-through; opacity: .6; }
.subtask__count { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #241430cc; }
.subtask__count-num::before { content: counter(done); }
</style>

tailwind

<details class="max-w-[380px] px-[18px] py-4 rounded-lg shadow-md font-sans text-[#241430] bg-[#FAF7F2] border-l-4" open style="border-left-color: #A8E6C1;">
  <summary class="font-bold text-[15px] cursor-pointer">Launch checklist</summary>
  <ul class="subtask-tw__list list-none m-0 mt-2.5 p-0 flex flex-col gap-1.5">
    <li><label class="flex items-center gap-2 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#A8E6C1" checked><span>Design review complete</span></label></li>
    <li><label class="flex items-center gap-2 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#A8E6C1" checked><span>Write release notes</span></label></li>
    <li><label class="flex items-center gap-2 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#A8E6C1" ><span>QA sign-off</span></label></li>
    <li><label class="flex items-center gap-2 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#A8E6C1" ><span>Notify stakeholders</span></label></li>
  </ul>
  <p class="mt-3 text-[13px] font-semibold text-[#241430cc]">Progress: <span class="subtask-tw__count-num"></span> of 4 subtasks complete</p>
</details>
<style>
.subtask-tw__list { counter-reset: done 0; }
.subtask-tw__list input:checked { counter-increment: done 1; }
.subtask-tw__list input:checked + span { text-decoration: line-through; opacity: .6; }
.subtask-tw__count-num::before { content: counter(done); }
</style>

react

export function Subtask({
  title = "Launch checklist",
  sub1 = true,
  sub2 = true,
  sub3 = false,
  sub4 = false,
  accent = "#A8E6C1",
}) {
  const items = [
    { label: "Design review complete", done: sub1 },
    { label: "Write release notes", done: sub2 },
    { label: "QA sign-off", done: sub3 },
    { label: "Notify stakeholders", done: sub4 },
  ];
  const doneCount = items.filter((i) => i.done).length;
  return (
    <details open style={{ fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2",
      maxWidth: 380, padding: "16px 18px", borderRadius: 8, borderLeft: "4px solid " + accent,
      boxShadow: "0 4px 14px rgba(36,20,48,.1)" }}>
      <summary style={{ fontWeight: 700, cursor: "pointer", fontSize: 15 }}>{title}</summary>
      <ul style={{ listStyle: "none", margin: "10px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
        {items.map((item) => (
          <li key={item.label}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
              <input type="checkbox" checked={item.done} readOnly style={{ width: 16, height: 16, accentColor: accent }} />
              <span style={{ textDecoration: item.done ? "line-through" : "none", opacity: item.done ? 0.6 : 1 }}>{item.label}</span>
            </label>
          </li>
        ))}
      </ul>
      <p style={{ margin: "12px 0 0", fontSize: 13, fontWeight: 600, color: "#241430cc" }}>
        Progress: {doneCount} of {items.length} subtasks complete
      </p>
    </details>
  );
}