StellarAdmin

<sa-checklist>
    <sa-checklist-item status="ChecklistStatus.Done" title="Passport and visa"/>
    <sa-checklist-item status="ChecklistStatus.Done" title="JR Pass voucher"/>
    <sa-checklist-item status="ChecklistStatus.InProgress" title="Hiking boots, worn in"/>
    <sa-checklist-item title="Rain shell"/>
    <sa-checklist-item title="Trekking poles"/>
</sa-checklist>

Usage

<sa-checklist>
    <sa-checklist-item status="ChecklistStatus.Done" title="..." description="..."/>
    <sa-checklist-item>
        <sa-checklist-item-status label="...">...</sa-checklist-item-status>
        <sa-checklist-item-title>...</sa-checklist-item-title>
        <sa-checklist-item-description>...</sa-checklist-item-description>
        <sa-checklist-item-actions>...</sa-checklist-item-actions>
        ...
    </sa-checklist-item>
</sa-checklist>

Examples

Descriptions

Set description to show a line of detail under the title. The status, title and description attributes bind to your model like any other attribute.

@{
    var requirements = new[]
    {
        (Status: ChecklistStatus.Done, Name: "Passport valid for six months", Detail: "Expires 2029; the return is 24 April."),
        (Status: ChecklistStatus.InProgress, Name: "Visa", Detail: "Applied 3 March; usually five working days."),
        (Status: ChecklistStatus.Todo, Name: "Visit Japan Web registration", Detail: "Completes the immigration and customs forms in advance."),
    };
}
<sa-checklist>
    @foreach (var requirement in requirements)
    {
        <sa-checklist-item status="requirement.Status" title="@requirement.Name" description="@requirement.Detail"/>
    }
</sa-checklist>

Set divider to change the line between rows. The default, ChecklistDivider.Inset, starts the line at the text; ChecklistDivider.FullWidth runs it across the whole list, and ChecklistDivider.None leaves it out.

<div class="grid gap-2">
    <p class="text-xs font-medium text-muted-foreground">Inset (default)</p>
    <sa-checklist>
        <sa-checklist-item status="ChecklistStatus.Done" title="Book flights" description="Emirates, 14 March."/>
        <sa-checklist-item status="ChecklistStatus.InProgress" title="Apply for visa" description="Usually five working days."/>
        <sa-checklist-item title="Buy travel insurance"/>
    </sa-checklist>
</div>
<div class="grid gap-2">
    <p class="text-xs font-medium text-muted-foreground">Full width</p>
    <sa-checklist divider="ChecklistDivider.FullWidth">
        <sa-checklist-item status="ChecklistStatus.Done" title="Book flights" description="Emirates, 14 March."/>
        <sa-checklist-item status="ChecklistStatus.InProgress" title="Apply for visa" description="Usually five working days."/>
        <sa-checklist-item title="Buy travel insurance"/>
    </sa-checklist>
</div>
<div class="grid gap-2">
    <p class="text-xs font-medium text-muted-foreground">None</p>
    <sa-checklist divider="ChecklistDivider.None">
        <sa-checklist-item status="ChecklistStatus.Done" title="Book flights" description="Emirates, 14 March."/>
        <sa-checklist-item status="ChecklistStatus.InProgress" title="Apply for visa" description="Usually five working days."/>
        <sa-checklist-item title="Buy travel insurance"/>
    </sa-checklist>
</div>

Custom status

The built-in statuses are Todo, InProgress and Done. For anything else, such as a failed check or a warning, put an <sa-checklist-item-status> in the item with your own icon. Its label is required: screen readers announce it before the title, as they announce "Done" for a built-in status. Put buttons or links that act on the item in <sa-checklist-item-actions>.

<div class="grid gap-1">
    <div class="flex items-baseline justify-between gap-2 text-sm font-semibold">
        Ready to publish?
        <span class="text-xs font-normal text-muted-foreground">Kumano Kodo, 5 days</span>
    </div>
    <sa-checklist>
        <sa-checklist-item status="ChecklistStatus.Done" title="Photos" description="8 photos, cover set."/>
        <sa-checklist-item status="ChecklistStatus.Done" title="Price per person" description="¥186,000, two to ten travellers."/>
        <sa-checklist-item title="Description" description="Too short: 40 words, needs at least 120.">
            <sa-checklist-item-status label="Failed">
                <sa-icon name="circle-x" class="text-destructive"/>
            </sa-checklist-item-status>
            <sa-checklist-item-actions>
                <sa-button-link variant="ButtonVariant.Outline" size="ButtonSize.Small" href="#">Edit description</sa-button-link>
            </sa-checklist-item-actions>
        </sa-checklist-item>
        <sa-checklist-item title="Cancellation policy" description="Uses the default policy.">
            <sa-checklist-item-status label="Needs attention">
                <sa-icon name="triangle-alert" class="text-[var(--sa-color-warning)]"/>
            </sa-checklist-item-status>
            <sa-checklist-item-actions>
                <sa-button-link variant="ButtonVariant.Ghost" size="ButtonSize.Small" href="#">Review</sa-button-link>
            </sa-checklist-item-actions>
        </sa-checklist-item>
    </sa-checklist>
</div>

An attribute and its own child part can't be used together: an item with both status and an <sa-checklist-item-status>, title and an <sa-checklist-item-title>, or description and an <sa-checklist-item-description> throws an exception.

Link

If you want to make the entire row clickable, use <sa-checklist-item-link> instead of <sa-checklist-item>. It takes an href or the routing attributes of the ASP.NET Core Anchor Tag Helper.

<sa-checklist>
    <sa-checklist-item-link status="ChecklistStatus.Done" href="#" title="Add your agency details" description="Name, address and IATA number.">
        <sa-checklist-item-actions>
            <sa-icon name="chevron-right" class="size-4"/>
        </sa-checklist-item-actions>
    </sa-checklist-item-link>
    <sa-checklist-item-link status="ChecklistStatus.InProgress" href="#" title="Invite your agents" description="2 of 6 seats used.">
        <sa-checklist-item-actions>
            <sa-icon name="chevron-right" class="size-4"/>
        </sa-checklist-item-actions>
    </sa-checklist-item-link>
    <sa-checklist-item-link href="#" title="Connect a payment provider" description="Needed before you take bookings.">
        <sa-checklist-item-actions>
            <sa-icon name="chevron-right" class="size-4"/>
        </sa-checklist-item-actions>
    </sa-checklist-item-link>
</sa-checklist>

Expandable details

Anything in an item other than its parts lays out under the text. Combine a button in <sa-checklist-item-actions> with an <sa-collapsible> to show details on request.

<div class="grid gap-3">
    <sa-progress value="40">
        <sa-progress-label>Set up your panel</sa-progress-label>
        <sa-progress-value>2 of 5</sa-progress-value>
    </sa-progress>
    <sa-checklist>
        <sa-checklist-item status="ChecklistStatus.Done" title="Connect your booking system" description="Bookings sync every 15 minutes.">
            <sa-checklist-item-actions>
                <sa-button variant="ButtonVariant.Ghost" size="ButtonSize.Small" commandfor="step-sync" command="--toggle">
                    Change
                    <sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
                </sa-button>
            </sa-checklist-item-actions>
            <sa-collapsible id="step-sync" hidden="">
                <pre class="overflow-auto rounded-md bg-muted p-3 font-mono text-xs">builder.AddVoyagerSync();</pre>
            </sa-collapsible>
        </sa-checklist-item>
        <sa-checklist-item title="Require sign-in" description="Anyone who can reach the panel can edit bookings.">
            <sa-checklist-item-status label="Needs attention">
                <sa-icon name="triangle-alert" class="text-[var(--sa-color-warning)]"/>
            </sa-checklist-item-status>
            <sa-checklist-item-actions>
                <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small" commandfor="step-auth" command="--toggle">
                    Show me how
                    <sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
                </sa-button>
            </sa-checklist-item-actions>
            <sa-collapsible id="step-auth">
                <pre class="overflow-auto rounded-md bg-muted p-3 font-mono text-xs">resources.RequireAuthorization("Staff");</pre>
            </sa-collapsible>
        </sa-checklist-item>
        <sa-checklist-item title="Brand the sidebar" description="Show the Voyager logo and name.">
            <sa-checklist-item-actions>
                <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small" commandfor="step-brand" command="--toggle">
                    Show me how
                    <sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
                </sa-button>
            </sa-checklist-item-actions>
            <sa-collapsible id="step-brand" hidden="">
                <pre class="overflow-auto rounded-md bg-muted p-3 font-mono text-xs">admin.ConfigureBranding(b => b.Title("Voyager"));</pre>
            </sa-collapsible>
        </sa-checklist-item>
        <sa-checklist-item description="Let your coding agent build resources for you.">
            <sa-checklist-item-status label="Optional">
                <sa-icon name="circle-dashed" class="text-muted-foreground"/>
            </sa-checklist-item-status>
            <sa-checklist-item-title>
                Install the agent skills
                <sa-badge variant="BadgeVariant.Outline">Optional</sa-badge>
            </sa-checklist-item-title>
            <sa-checklist-item-actions>
                <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small" commandfor="step-skills" command="--toggle">
                    Show me how
                    <sa-icon name="chevron-down" class="transition-transform in-aria-expanded:rotate-180"/>
                </sa-button>
            </sa-checklist-item-actions>
            <sa-collapsible id="step-skills" hidden="">
                <pre class="overflow-auto rounded-md bg-muted p-3 font-mono text-xs">npx skills add stellar-admin/stellar-admin</pre>
            </sa-collapsible>
        </sa-checklist-item>
    </sa-checklist>
</div>

Groups

Split a long list into several checklists with ordinary headings between them.

<div class="grid gap-3">
    <h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Before you leave</h3>
    <sa-checklist>
        <sa-checklist-item status="ChecklistStatus.Done" title="Check in online"/>
        <sa-checklist-item status="ChecklistStatus.Done" title="Print the ryokan address in Japanese"/>
    </sa-checklist>
    <h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">At Kansai airport</h3>
    <sa-checklist>
        <sa-checklist-item status="ChecklistStatus.InProgress" title="Collect the pocket Wi-Fi"/>
        <sa-checklist-item title="Exchange the JR Pass voucher"/>
    </sa-checklist>
</div>

Nested

Put a checklist inside an item to list its sub-steps. Set size to ChecklistSize.Small for a compact list.

<sa-checklist>
    <sa-checklist-item status="ChecklistStatus.Done" title="Flights"/>
    <sa-checklist-item status="ChecklistStatus.InProgress" title="Visa application" description="2 of 4 done.">
        <sa-checklist size="ChecklistSize.Small">
            <sa-checklist-item status="ChecklistStatus.Done" title="Passport photo"/>
            <sa-checklist-item status="ChecklistStatus.Done" title="Application form"/>
            <sa-checklist-item title="Proof of funds"/>
            <sa-checklist-item title="Fee, ¥3,000"/>
        </sa-checklist>
    </sa-checklist-item>
    <sa-checklist-item title="Travel insurance"/>
</sa-checklist>

Actions

<sa-checklist-item-actions> holds any trailing content, such as a due date and the person responsible.

<sa-checklist>
    <sa-checklist-item status="ChecklistStatus.Done" title="Book the group's coach">
        <sa-checklist-item-actions>
            <span>12 Mar</span>
            <sa-avatar name="Lena Moreau" size="AvatarSize.Small"/>
        </sa-checklist-item-actions>
    </sa-checklist-item>
    <sa-checklist-item status="ChecklistStatus.InProgress" title="Confirm dietary needs with the ryokan">
        <sa-checklist-item-actions>
            <span class="text-destructive">Due today</span>
            <sa-avatar name="Amara Okafor" size="AvatarSize.Small"/>
        </sa-checklist-item-actions>
    </sa-checklist-item>
    <sa-checklist-item title="Send the final itinerary">
        <sa-checklist-item-actions>
            <span>2 Apr</span>
            <sa-avatar name="Kenji Tanaka" size="AvatarSize.Small"/>
        </sa-checklist-item-actions>
    </sa-checklist-item>
</sa-checklist>

Card

A small checklist in a card, with a progress bar. A finished item keeps its colour; set muted on <sa-checklist-item-title> to mute it.

<sa-card size="CardSize.Small">
    <sa-card-header>
        <sa-card-title>Getting started</sa-card-title>
        <sa-card-description>3 of 5 done</sa-card-description>
    </sa-card-header>
    <sa-card-content class="grid gap-2">
        <sa-progress value="60"/>
        <sa-checklist size="ChecklistSize.Small">
            <sa-checklist-item status="ChecklistStatus.Done">
                <sa-checklist-item-title muted="true">Create your first tour</sa-checklist-item-title>
            </sa-checklist-item>
            <sa-checklist-item status="ChecklistStatus.Done">
                <sa-checklist-item-title muted="true">Add photos</sa-checklist-item-title>
            </sa-checklist-item>
            <sa-checklist-item status="ChecklistStatus.Done">
                <sa-checklist-item-title muted="true">Set prices</sa-checklist-item-title>
            </sa-checklist-item>
            <sa-checklist-item status="ChecklistStatus.InProgress" title="Invite an agent"/>
            <sa-checklist-item title="Take a test booking"/>
        </sa-checklist>
    </sa-card-content>
</sa-card>

Statuses

The three built-in statuses, and three of your own.

<sa-checklist>
    <sa-checklist-item status="ChecklistStatus.Todo" title="To do" description="The default status."/>
    <sa-checklist-item status="ChecklistStatus.InProgress" title="In progress"/>
    <sa-checklist-item status="ChecklistStatus.Done" title="Done"/>
    <sa-checklist-item title="Needs attention" description="A status of your own, with a warning icon.">
        <sa-checklist-item-status label="Needs attention">
            <sa-icon name="triangle-alert" class="text-[var(--sa-color-warning)]"/>
        </sa-checklist-item-status>
    </sa-checklist-item>
    <sa-checklist-item title="Failed">
        <sa-checklist-item-status label="Failed">
            <sa-icon name="circle-x" class="text-destructive"/>
        </sa-checklist-item-status>
    </sa-checklist-item>
    <sa-checklist-item title="Optional">
        <sa-checklist-item-status label="Optional">
            <sa-icon name="circle-dashed" class="text-muted-foreground"/>
        </sa-checklist-item-status>
    </sa-checklist-item>
</sa-checklist>

API Reference

`<sa-checklist>`

Renders a <ul> element with role="list", forwarding any global attributes.

Prop

Type

`<sa-checklist-item>`

Renders an <li> element for a row of the checklist, forwarding any global attributes.

Prop

Type

`<sa-checklist-item-link>`

Renders an <a> element styled as a checklist row, inside an <li> element, making the entire row clickable. It takes the same status, title and description attributes as <sa-checklist-item>.

Routing attributes

The link item also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

`<sa-checklist-item-status>`

Renders a <span> element in place of the built-in status icon, holding your own content, forwarding any global attributes.

Prop

Type

`<sa-checklist-item-title>`

Renders a <div> element for the item title, forwarding any global attributes.

Prop

Type

`<sa-checklist-item-description>`

Renders a <p> element for the item description, forwarding any global attributes.

`<sa-checklist-item-actions>`

Renders a <div> element at the end of the row that holds buttons, links or other trailing content, forwarding any global attributes.

Checklist

Usage

Examples

Descriptions

Dividers

Custom status

Link

Expandable details

Groups

Nested

Actions

Card

Statuses

API Reference

`<sa-checklist>`

`<sa-checklist-item>`

`<sa-checklist-item-link>`

Routing attributes

`<sa-checklist-item-status>`

`<sa-checklist-item-title>`

`<sa-checklist-item-description>`

`<sa-checklist-item-actions>`

On this page

Checklist

UsageCopy Anchor Link

ExamplesCopy Anchor Link

DescriptionsCopy Anchor Link

DividersCopy Anchor Link

Custom statusCopy Anchor Link

LinkCopy Anchor Link

Expandable detailsCopy Anchor Link

GroupsCopy Anchor Link

NestedCopy Anchor Link

ActionsCopy Anchor Link

CardCopy Anchor Link

StatusesCopy Anchor Link

API ReferenceCopy Anchor Link

<sa-checklist>Copy Anchor Link

<sa-checklist-item>Copy Anchor Link

<sa-checklist-item-link>Copy Anchor Link

Routing attributesCopy Anchor Link

<sa-checklist-item-status>Copy Anchor Link

<sa-checklist-item-title>Copy Anchor Link

<sa-checklist-item-description>Copy Anchor Link

<sa-checklist-item-actions>Copy Anchor Link

On this page

Usage

Examples

Descriptions

Dividers

Custom status

Link

Expandable details

Groups

Nested

Actions

Card

Statuses

API Reference

`<sa-checklist>`

`<sa-checklist-item>`

`<sa-checklist-item-link>`

Routing attributes

`<sa-checklist-item-status>`

`<sa-checklist-item-title>`

`<sa-checklist-item-description>`

`<sa-checklist-item-actions>`