Components

Listbox

Listboxes display a list of options and allow users to select one or more of them.
Source Styles source

Composition

This component is a composition of 2 key components:

  • LumexListbox: A component representing a listbox.
  • LumexListboxItem: A component representing a listbox item.

Usage

The listbox component is a versatile control that allows users to select one or more options from a predefined list.

  • New file
  • Edit file
  • Share file
  • Delete file 
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string">
        <LumexListboxItem>New file</LumexListboxItem>
        <LumexListboxItem>Edit file</LumexListboxItem>
        <LumexListboxItem>Share file</LumexListboxItem>
        <LumexListboxItem Color="@ThemeColor.Danger"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

Disabled

The listbox items can be disabled to prevent user interaction. A disabled listbox item is faded and does not respond to user clicks.

You can achieve this by using the Disabled parameter on a ListboxItem.

  • New file
  • Edit file
  • Share file
  • Delete file 
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string">
        <LumexListboxItem>New file</LumexListboxItem>
        <LumexListboxItem Disabled="@true">Edit file</LumexListboxItem>
        <LumexListboxItem>Share file</LumexListboxItem>
        <LumexListboxItem Color="@ThemeColor.Danger"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

Alternatively, you can achieve this by using the DisabledItems parameter on a Listbox. In this case, the Value parameter must be specified for each listbox item.

  • New file
  • Edit file
  • Share file
  • Delete file 
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string" DisabledItems="@(["new", "delete"])">
        <LumexListboxItem Value="@("new")">New file</LumexListboxItem>
        <LumexListboxItem Value="@("edit")">Edit file</LumexListboxItem>
        <LumexListboxItem Value="@("share")">Share file</LumexListboxItem>
        <LumexListboxItem Value="@("delete")"
                          Color="@ThemeColor.Danger"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

Colors & Variants

Customize the listbox with different visual styles and color themes to match your application’s design.

  • New file
  • Edit file
  • Share file
  • Delete file
Color
Variant 
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string" Color="@_color" Variant="@_variant">
        <LumexListboxItem>New file</LumexListboxItem>
        <LumexListboxItem>Edit file</LumexListboxItem>
        <LumexListboxItem>Share file</LumexListboxItem>
        <LumexListboxItem Color="@ThemeColor.Danger"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

<fieldset>
    <legend class="text-small text-default-500">Color</legend>
    <div class="flex flex-wrap gap-2">
        <InputRadioGroup @bind-Value="@_color">
            @foreach (var color in Enum.GetValues<ThemeColor>())
            {
                <label>
                    <InputRadio Value="@color" />
                    @color
                </label>
            }
        </InputRadioGroup>
    </div>
</fieldset>

<fieldset>
    <legend class="text-small text-default-500">Variant</legend>
    <div class="flex flex-wrap gap-2">
        <InputRadioGroup @bind-Value="@_variant">
            @foreach (var variant in Enum.GetValues<ListboxVariant>())
            {
                <label>
                    <InputRadio Value="@variant" />
                    @variant
                </label>
            }
        </InputRadioGroup>
    </div>
</fieldset>

@code {
    private ThemeColor _color = ThemeColor.Default;
    private ListboxVariant _variant = ListboxVariant.Solid;
}

Start & End Content

Add custom content, such as icons or additional information, to the start or end of each item in the listbox.

  • New file
  • Edit file
  • Share file
  • Delete file 
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
        <LumexListboxItem StartContent="@_newFile">New file</LumexListboxItem>
        <LumexListboxItem StartContent="@_editFile">Edit file</LumexListboxItem>
        <LumexListboxItem StartContent="@_shareFile">Share file</LumexListboxItem>
        <LumexListboxItem Color="@ThemeColor.Danger"
                          StartContent="@_deleteFile"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

@code {
    private RenderFragment _newFile =
        @<LumexIcon Icon="@Icons.Rounded.LibraryAdd"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _editFile =
        @<LumexIcon Icon="@Icons.Rounded.EditSquare"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _shareFile =
        @<LumexIcon Icon="@Icons.Rounded.Share"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _deleteFile =
        @<LumexIcon Icon="@Icons.Rounded.Delete"
                    Size="@new("20")"
                    Class="shrink-0" />;
}

Description

Add a description to individual listbox item to provide additional context or details about the options.

  • New file Create a new file
  • Edit file Edit the file
  • Share file Share the file
  • Delete file Delete the file
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
        <LumexListboxItem Description="Create a new file" 
                          StartContent="@_newFile">
            New file
        </LumexListboxItem>
        <LumexListboxItem Description="Edit the file" 
                          StartContent="@_editFile">
            Edit file
        </LumexListboxItem>
        <LumexListboxItem Description="Share the file" 
                          StartContent="@_shareFile">
            Share file
        </LumexListboxItem>
        <LumexListboxItem Description="Delete the file"
                          Color="@ThemeColor.Danger"
                          StartContent="@_deleteFile"
                          Class="text-danger">
            Delete file
        </LumexListboxItem>
    </LumexListbox>
</div>

@code {
    private RenderFragment _newFile =
        @<LumexIcon Icon="@Icons.Rounded.LibraryAdd"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _editFile =
        @<LumexIcon Icon="@Icons.Rounded.EditSquare"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _shareFile =
        @<LumexIcon Icon="@Icons.Rounded.Share"
                    Size="@new("20")"
                    Class="text-default-500 shrink-0" />;

    private RenderFragment _deleteFile =
        @<LumexIcon Icon="@Icons.Rounded.Delete"
                    Size="@new("20")"
                    Class="shrink-0" />;
}

Empty Content

Define custom content to display when the list has no items, providing a better user experience.

  • No items \(o_o)/
<div class="w-full max-w-60 px-1 py-2 border border-default-200 rounded-small">
    <LumexListbox TValue="string">
        <EmptyContent>
            <span class="text-small">No items \(o_o)/</span>
        </EmptyContent>
    </LumexListbox>
</div>

Two-way Data Binding

The listbox component supports two-way data binding, allowing you to programmatically control the value(s).

Single Selection

Use the @bind-Value directive, or the Value and ValueChanged parameters.

  • Cat
  • Dog
  • Elephant
  • Lion

Selected value: cat

<div class="w-full flex flex-col gap-2">
    <div class="max-w-60 px-1 py-2 border border-default-200 rounded-small">
        <LumexListbox @bind-Value="@_selectedValue">
            <LumexListboxItem Value="@("cat")">Cat</LumexListboxItem>
            <LumexListboxItem Value="@("dog")">Dog</LumexListboxItem>
            <LumexListboxItem Value="@("elephant")">Elephant</LumexListboxItem>
            <LumexListboxItem Value="@("lion")">Lion</LumexListboxItem>
        </LumexListbox>
    </div>
    <p class="text-small text-default-500">
        Selected value: @_selectedValue
    </p>
</div>

@code {
    private string _selectedValue = "cat";
}

Multiple Selection

Use the @bind-Values directive, or the Values and ValuesChanged parameters.

  • Cat
  • Dog
  • Elephant
  • Lion

Selected values: cat

<div class="w-full flex flex-col gap-2">
    <div class="max-w-60 px-1 py-2 border border-default-200 rounded-small">
        <LumexListbox @bind-Values="@_selectedValues">
            <LumexListboxItem Value="@("cat")">Cat</LumexListboxItem>
            <LumexListboxItem Value="@("dog")">Dog</LumexListboxItem>
            <LumexListboxItem Value="@("elephant")">Elephant</LumexListboxItem>
            <LumexListboxItem Value="@("lion")">Lion</LumexListboxItem>
        </LumexListbox>
    </div>
    <p class="text-small text-default-500">
        Selected values: @(string.Join(", ", _selectedValues))
    </p>
</div>

@code {
    private ICollection<string> _selectedValues = ["cat"];
}

Custom Styles

This component suppots named slots (represented as data-* attributes) that allow you to apply custom CSS to specific parts of the component.

LumexListbox

  • Root: The main container for the entire listbox component.
  • List: The wrapper for the list items, containing all listbox items.
  • EmptyContent: The area displayed when the list is empty.

LumexListboxItem

  • Root: The main container for the listbox item.
  • Wrapper: The wrapper for the title, description, and icons.
  • Title: The title of the listbox item.
  • Description: The description of the listbox item.
  • SelectedIcon: The icon that indicates the item is selected.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Listbox

  • Class: The CSS class names to style the listbox wrapper.
  • Classes: The CSS class names to style the listbox slots.
  • ItemClasses: The CSS class names to style the listbox item slots.

Listbox Item

  • Class: The CSS class names to style the listbox item wrapper.
  • Classes: The CSS class names to style the listbox item slots.
  • Issues
    7
  • Pull Requests
    6
  • Discussions
    3
  • Actions
    2
  • Projects
    1
  • Releases

    v1.0.0-preview.4

    3 months ago · Latest

    12
  • Contributors
    2
  • Watchers
    3
  • LicenseMIT
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet">

<LumexListbox TValue="string"
              Variant="@ListboxVariant.Flat"
              Classes="@_classes"
              ItemClasses="@_itemClasses">
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("bug"), "bg-success/15 text-success-600"))"
                      EndContent="@_counter(7)">
        Issues
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("git-pull-request"), "bg-primary/15 text-primary"))"
                      EndContent="@_counter(6)">
        Pull Requests
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("conversation"), "bg-secondary/15 text-secondary"))"
                      EndContent="@_counter(3)">
        Discussions
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("play-circle"), "bg-warning/15 text-warning"))"
                      EndContent="@_counter(2)">
        Actions
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("layout"), "bg-default/30 text-foreground"))"
                      EndContent="@_counter(1)">
        Projects
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("purchase-tag"), "bg-primary/15 text-primary"))"
                      EndContent="@_counter(12)"
                      Class="h-auto">
        <ChildContent>
            <div class="flex flex-col gap-1">
                <span>Releases</span>
                <div class="px-2 py-1 rounded-small bg-default-100 ring-1 ring-default-200/30 ring-inset group-hover:bg-default-200/50">
                    <p class="text-tiny">v1.0.0-preview.4</p>
                    <p class="text-tiny text-default-500">
                        3 months ago · <span class="text-success-600">Latest</span>
                    </p>
                </div>
            </div>
        </ChildContent>
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("group"), "bg-orange-500/15 text-orange-500"))"
                      EndContent="@_counter(2)">
        Contributors
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("show"), "bg-warning/15 text-warning"))"
                      EndContent="@_counter(3)">
        Watchers
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper(new(_icon("certification"), "bg-danger/15 text-danger"))">
        <ChildContent>License</ChildContent>
        <EndContent>
            <span class="text-small text-default-400">MIT</span>
        </EndContent>
    </LumexListboxItem>
</LumexListbox>

@code {
    private RenderFragment<(RenderFragment ChildContent, string Class)> _iconWrapper = props =>
        @<div class="flex items-center rounded-small justify-center w-7 h-7 @props.Class">
            @props.ChildContent
        </div>;

    private RenderFragment<string> _icon = icon =>
        @<LumexIcon Icon="@($"bx bx-{icon}")" Size="@new("18")" />;

    private RenderFragment<int> _counter = counter =>
        @<div class="flex items-center gap-1 text-default-400">
            <span class="text-small">@counter</span>
            <LumexIcon Icon="@Icons.Rounded.ChevronRight" Size="@new("20")" />
        </div>;

    private ListboxSlots _classes = new()
    {
        Root = "p-0 bg-surface1 max-w-72 shadow-small rounded-medium",
        List = "gap-0 divide-y divide-default-200/50"
    };

    private ListboxItemSlots _itemClasses = new()
    {
        Root = "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 hover:bg-default/15"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙