checklist

Checks with an outcome (pass, warn, fail, pending), shown by icon shape and said in words.

Example

  • Passed: Webhook URL set https://hooks.example.com/perks
  • Warning: Event list is empty The API returns no events for this perk.
  • Failed: Required field missing event_id
  • Pending: Partner response

Laravel

<x-admin::checklist :items="[
    ['label' => 'Webhook URL set', 'status' => 'pass', 'detail' => 'https://hooks.example.com/perks'],
    ['label' => 'Event list is empty', 'status' => 'warn', 'detail' => 'The API returns no events for this perk.'],
    ['label' => 'Required field missing', 'status' => 'fail', 'detail' => 'event_id'],
    ['label' => 'Partner response', 'status' => 'pending'],
]" />

Props

PropRequiredDefaultOptions
items[]

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Checklist } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<ul class="adm-checklist">
                    <li class="adm-checklist__item adm-checklist__item--pass">
            <svg class="adm-icon adm-checklist__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>            <span class="adm-checklist__text">
                <span class="adm-sr-only">Passed:</span>
                <span class="adm-checklist__label">Webhook URL set</span>
                <span class="adm-checklist__detail">https://hooks.example.com/perks</span>            </span>
        </li>
                    <li class="adm-checklist__item adm-checklist__item--warn">
            <svg class="adm-icon adm-checklist__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg>            <span class="adm-checklist__text">
                <span class="adm-sr-only">Warning:</span>
                <span class="adm-checklist__label">Event list is empty</span>
                <span class="adm-checklist__detail">The API returns no events for this perk.</span>            </span>
        </li>
                    <li class="adm-checklist__item adm-checklist__item--fail">
            <svg class="adm-icon adm-checklist__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg>            <span class="adm-checklist__text">
                <span class="adm-sr-only">Failed:</span>
                <span class="adm-checklist__label">Required field missing</span>
                <span class="adm-checklist__detail">event_id</span>            </span>
        </li>
                    <li class="adm-checklist__item adm-checklist__item--pending">
            <svg class="adm-icon adm-checklist__icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>            <span class="adm-checklist__text">
                <span class="adm-sr-only">Pending:</span>
                <span class="adm-checklist__label">Partner response</span>
                            </span>
        </li>
    </ul>