Back to all examples

Task list page

<GoabText as="h1" mt="none">Apply for a service</GoabText>
      <GoabxCallout
        type="important"
        emphasis="low"
        size="medium"
        heading="Application incomplete"
        mb="2xl"
        mt="xl"
        maxWidth="360px"
      >
        You have completed 1 of 3 sections.
      </GoabxCallout>

      <GoabText as="h2">1. Before you start</GoabText>
      <GoabxTable width="100%" mb="2xl" mt="l">
        <tbody>
          <tr>
            <td>
              <a href="#">Read terms of use</a>
            </td>
            <td className="goa-table-number-column">
              <GoabxBadge type="success" content="Completed" ariaLabel="completed" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabxTable>

      <GoabText as="h2">2. Prepare application</GoabText>
      <GoabxTable width="100%" mb="2xl" mt="l">
        <tbody>
          <tr>
            <td>
              <a href="#">Your contact details</a>
            </td>
            <td className="goa-table-number-column">
              <GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
            </td>
          </tr>
          <tr>
            <td>
              <a href="#">Your family</a>
            </td>
            <td className="goa-table-number-column">
              <GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
            </td>
          </tr>
          <tr>
            <td>
              <a href="#">Verify your identity</a>
            </td>
            <td className="goa-table-number-column">
              <GoabxBadge type="information" content="Not started" ariaLabel="not started" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabxTable>

      <GoabText as="h2" mb="s">3. Schedule service</GoabText>
      <GoabText size="body-s" color="secondary" mt="2xs">
        You need to complete the previous section before you can start this task.
      </GoabText>
      <GoabxTable width="100%" mt="l" mb="3xl">
        <tbody>
          <tr>
            <td>Receive email confirmation</td>
            <td className="goa-table-number-column">
              <GoabxBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
            </td>
          </tr>
          <tr>
            <td>Pay service fee</td>
            <td className="goa-table-number-column">
              <GoabxBadge type="light" content="Cannot start yet" ariaLabel="cannot start yet" icon={false} />
            </td>
          </tr>
        </tbody>
      </GoabxTable>
<goab-text as="h1" mt="none">Apply for a service</goab-text>
<goabx-callout type="important" emphasis="low" size="medium" heading="Application incomplete" mb="2xl" mt="xl" maxWidth="360px">
  You have completed 1 of 3 sections.
</goabx-callout>

<goab-text as="h2">1. Before you start</goab-text>
<goabx-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Read terms of use</a></td>
      <td class="goa-table-number-column">
        <goabx-badge type="success" content="Completed" ariaLabel="completed" [icon]="false"></goabx-badge>
      </td>
    </tr>
  </tbody>
</goabx-table>

<goab-text as="h2">2. Prepare application</goab-text>
<goabx-table width="100%" mb="2xl" mt="l">
  <tbody>
    <tr>
      <td><a href="#">Your contact details</a></td>
      <td class="goa-table-number-column">
        <goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Your family</a></td>
      <td class="goa-table-number-column">
        <goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Verify your identity</a></td>
      <td class="goa-table-number-column">
        <goabx-badge type="information" content="Not started" ariaLabel="not started" [icon]="false"></goabx-badge>
      </td>
    </tr>
  </tbody>
</goabx-table>

<goab-text as="h2" mb="s">3. Schedule service</goab-text>
<goab-text size="body-s" color="secondary" mt="2xs">You need to complete the previous section before you can start this task.</goab-text>
<goabx-table width="100%" mt="l" mb="3xl">
  <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td class="goa-table-number-column">
        <goabx-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goabx-badge>
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td class="goa-table-number-column">
        <goabx-badge type="light" content="Cannot start yet" ariaLabel="cannot start yet" [icon]="false"></goabx-badge>
      </td>
    </tr>
  </tbody>
</goabx-table>
<goa-text as="h1" mt="none">Apply for a service</goa-text>
<goa-callout version="2" type="important" emphasis="low" size="medium" heading="Application incomplete" mb="2xl" mt="xl" maxwidth="360px">
  You have completed 1 of 3 sections.
</goa-callout>

<goa-text as="h2">1. Before you start</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%;">
    <tbody>
    <tr>
      <td><a href="#">Read terms of use</a></td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="success" content="Completed" aria-label="completed" icon="false"></goa-badge>
      </td>
    </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2">2. Prepare application</goa-text>
<goa-table version="2" width="100%" mb="2xl" mt="l">
  <table style="width: 100%;">
    <tbody>
    <tr>
      <td><a href="#">Your contact details</a></td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Your family</a></td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
      </td>
    </tr>
    <tr>
      <td><a href="#">Verify your identity</a></td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="information" content="Not started" aria-label="not started" icon="false"></goa-badge>
      </td>
    </tr>
    </tbody>
  </table>
</goa-table>

<goa-text as="h2" mb="s">3. Schedule service</goa-text>
<goa-text size="body-s" color="secondary" mt="2xs">You need to complete the previous section before you can start this task.</goa-text>
<goa-table version="2" width="100%" mt="l" mb="3xl">
  <table style="width: 100%;">
    <tbody>
    <tr>
      <td>Receive email confirmation</td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="light" content="Cannot start yet" aria-label="cannot start yet" icon="false"></goa-badge>
      </td>
    </tr>
    <tr>
      <td>Pay service fee</td>
      <td class="goa-table-number-column">
        <goa-badge version="2" type="light" content="Cannot start yet" aria-label="cannot start yet" icon="false"></goa-badge>
      </td>
    </tr>
    </tbody>
  </table>
</goa-table>

A task list page provides a structure for multi-step services, showing users their progress through a series of tasks with clear status indicators.

When to use

Use this pattern when:

  • A service has multiple distinct tasks or sections to complete
  • Users need to see their overall progress
  • Tasks can potentially be completed in different orders
  • Users may return to complete tasks over multiple sessions

Considerations

  • Group related actions into logical tasks
  • Show status badges for each task (Completed, In progress, Not started, Cannot start yet)
  • Include a summary callout showing how many sections are complete
  • Allow users to complete tasks in any order when possible
  • Clearly indicate when tasks have dependencies