List - Fod.DemoPage

Basic List

Simple list rendering with string items or custom objects.

Simple String List

Selected: None

Custom Item Template

Selected: None

razor

<FodList Items="@fruits"
        AriaLabel="Fruit selection"
        @bind-SelectedItem="selectedFruit" />

<FodList Items="@products"
        ItemKey="p => p.Id"
        OptionText="p => p.Name"
        @bind-SelectedItem="selectedProduct">
    <ItemTemplate Context="product">
        <div>@product.Name - @product.Price</div>
    </ItemTemplate>
</FodList>

List Variants

Lists support bordered, striped, and borderless variants.

Bordered (Default)

Striped

Without Border

razor

<FodList Bordered="true" ... />
<FodList Striped="true" ... />
<FodList Bordered="false" ... />

List Sizes

Lists come in three sizes: Small, Medium (default), and Large.

Small

Medium (Default)

Large

razor

<FodList Size="Size.Small" ... />
<FodList Size="Size.Medium" ... />
<FodList Size="Size.Large" ... />

Keyboard Navigation

Lists support full keyboard navigation and ARIA attributes for screen readers.

Click on the list first to focus it, then try these keyboard shortcuts:

Arrow Down - Move to next item
Arrow Up - Move to previous item
Home - Move to first item
End - Move to last item
Enter - Select active item

Selected: None

razor

<FodList Items="@items"
        AriaLabel="Navigation demo"
        @bind-SelectedItem="selectedItem" />

<!-- Keyboard navigation is enabled by default -->
<!-- Disable with EnableKeyboardNavigation="false" -->

Selection Indicator

Enable a prominent left border and lighter background for selected items.

Default Selection

With Selection Indicator

razor

<FodList ShowSelectionIndicator="true" ... />

Empty State

List displays an empty state message when no items are provided.

Empty List

razor

<FodList Items="@emptyList" AriaLabel="Empty list" />

Tab Index Control

Control keyboard navigation order with the TabIndex parameter.

TabIndex = 0 (In Tab Order)

TabIndex = -1 (Not In Tab Order)

This list is focusable via JavaScript but skipped in tab order.

razor

<FodList TabIndex="0" ... />
<FodList TabIndex="-1" ... />

Custom Item Comparer

Use ItemComparer to define custom equality logic for complex objects.

The Problem Without ItemComparer:

When you programmatically set a selected item that is a different object instance (even with the same ID), the list will not recognize it as selected because default comparison uses reference equality.

Without ItemComparer

Selecting User #2 externally does not highlight the item.

Selected: Alice Johnson

With ItemComparer

Using UserIdComparer correctly highlights items by ID.

Selected: Alice Johnson

When to Use ItemComparer:

Working with API responses that return new object instances
Using immutable data patterns (records, frozen collections)
Need to match by business key (ID, code, etc.) not reference
Implementing undo/redo with object snapshots

csharp

// Define custom comparer
private class UserIdComparer : IEqualityComparer<User>
{
    public bool Equals(User? x, User? y) => x?.Id == y?.Id;
    public int GetHashCode(User obj) => obj.Id.GetHashCode();
}

// Use in component
<FodList Items="@users"
        ItemComparer="@userIdComparer"
        @bind-SelectedItem="selectedUser" />

API Reference

FodList component properties and their descriptions.

No properties defined.