`<bio-task-list>`

A daily task checklist that displays categorized tasks (exercise, nutrition, wellness) for the current program day. Tasks are checked off as observations, tracked server-side. Supports both static configuration and profile-driven mode.

<bio-task-list></bio-task-list>

How It Works

When <bio-task-list> receives context from a parent <bio-provider>:

Resolves task data — in profile-driven mode, reads the task list from the SDK config's tasks section, which includes task definitions and completion status
Renders categorized tasks — groups tasks by category with icons and labels
Handles completion — when a user checks a task, sends a POST to record the observation with metadata (widget: "bio-task-list", day: N)
Handles unchecking — when a user unchecks a task, sends a request to remove the observation
Dispatches events — fires anybio:task:complete and anybio:task:uncomplete for the host app to react

Modes

Profile-Driven Mode

Omit the day attribute and let the widget auto-configure from the episode profile:

<bio-task-list></bio-task-list>

Static Mode

Pass the day number directly:

<bio-task-list day="5" episode-id="ep_abc123"></bio-task-list>

Attributes

Attribute	Type	Required	Description
`day`	`number`	No	Program day number. Omit for profile-driven mode.
`episode-id`	`string`	No	Episode ID. Falls back to the episode resolved by `<bio-provider>`.

Events

Event	Detail	Description
`anybio:task:complete`	`{ taskId, biosignal, day, episodeId }`	Fired when a task is checked off.
`anybio:task:uncomplete`	`{ taskId, biosignal, day, episodeId }`	Fired when a task is unchecked.
`bio-task-complete`	(same as anybio:task:complete)	Backward-compatible alias.
`bio-task-uncomplete`	(same as anybio:task:uncomplete)	Backward-compatible alias.

CSS Classes

The widget renders with Light DOM — all elements are directly styleable.

Class	Element
`.bio-task-category`	Category group container
`.bio-task-category-header`	Category heading with icon
`.bio-task-item`	Individual task row
`.bio-task-checkbox`	Checkbox input
`.bio-task-label`	Task description text
`.bio-task-completed`	Applied to completed task rows

CSS Custom Properties

Property	Default	Description
`--bio-primary`	`#5a8a6a`	Checkbox accent color
`--bio-surface`	`#ffffff`	Task item background
`--bio-surface-muted`	`#f8fafc`	Completed task background
`--bio-border`	`#e2e8f0`	Task item border
`--bio-radius`	`8px`	Task item border radius

Code Examples

Profile-Driven

<bio-provider
  api-key="org_your_key"
  project-key="proj_your_key"
  xuser-id="user-123">

  <bio-task-list></bio-task-list>

</bio-provider>

With Event Handling

<bio-task-list id="tasks"></bio-task-list>

<script>
  document.addEventListener('anybio:task:complete', (e) => {
    console.log(`Task completed: ${e.detail.biosignal} on day ${e.detail.day}`);
  });

  document.addEventListener('anybio:task:uncomplete', (e) => {
    console.log(`Task unchecked: ${e.detail.biosignal}`);
  });
</script>

Custom Styling

/* Circular checkboxes */
.bio-task-checkbox {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

/* Completed task styling */
.bio-task-completed .bio-task-label {
  text-decoration: line-through;
  opacity: 0.6;
}

bio-task-list

On this page