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-900/10 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-900/10 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-900/10 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-900/10 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>

<LumexRadioGroup Label="Color"
                 Orientation="@Orientation.Horizontal"
                 @bind-Value="@_color">
    @foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
    {
        <LumexRadio Value="@color" Color="@color">
            @color.ToString()
        </LumexRadio>
    }
</LumexRadioGroup>

<LumexRadioGroup Label="Variant"
                 Orientation="@Orientation.Horizontal"
                 @bind-Value="@_variant">
    @foreach( var variant in Enum.GetValues<ListboxVariant>() )
    {
        <LumexRadio Value="@variant">
            @variant.ToString()
        </LumexRadio>
    }
</LumexRadioGroup>

@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
@using LumexUI.Shared.Icons

<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
    <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
        <LumexListboxItem>
            <StartContent>
                <SquarePlusIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>New file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem>
            <StartContent>
                <SquarePenIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Edit file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem>
            <StartContent>
                <ShareIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Share file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem Color="@ThemeColor.Danger"
                          Class="text-danger">
            <StartContent>
                <Trash2Icon Size="18" class="shrink-0" />
            </StartContent>
            <ChildContent>Delete file</ChildContent>
        </LumexListboxItem>
    </LumexListbox>
</div>

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
@using LumexUI.Shared.Icons

<div class="w-full max-w-60 px-1 py-2 border border-default-900/10 rounded-small">
    <LumexListbox TValue="string" Variant="@ListboxVariant.Flat">
        <LumexListboxItem Description="Create a new file">
            <StartContent>
                <SquarePlusIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>New file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem Description="Edit the file">
            <StartContent>
                <SquarePenIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Edit file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem Description="Share the file">
            <StartContent>
                <ShareIcon Size="18" class="text-default-500 shrink-0" />
            </StartContent>
            <ChildContent>Share file</ChildContent>
        </LumexListboxItem>

        <LumexListboxItem Description="Delete the file"
                          Color="@ThemeColor.Danger"
                          Class="text-danger">
            <StartContent>
                <Trash2Icon Size="18" class="shrink-0" />
            </StartContent>
            <ChildContent>Delete file</ChildContent>
        </LumexListboxItem>
    </LumexListbox>
</div>

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-900/10 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-900/10 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-900/10 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

  • Base: 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

  • Base: 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

    v2.0.0-preview.1

    3 months ago · Latest

    12
  • Contributors
    2
  • Watchers
    3
  • LicenseMIT
@using LumexUI.Shared.Icons

<LumexListbox TValue="string"
              Variant="@ListboxVariant.Flat"
              Classes="@_classes"
              ItemClasses="@_itemClasses">
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( BugIcon ) ), "bg-success/15 text-success-600" ) )"
                      EndContent="@_counter( 7 )">
        Issues
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( GitPullRequestArrowIcon ) ), "bg-primary/15 text-primary" ) )"
                      EndContent="@_counter( 6 )">
        Pull Requests
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( MessagesSquareIcon ) ), "bg-secondary/15 text-secondary" ) )"
                      EndContent="@_counter( 3 )">
        Discussions
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( CirclePlayIcon ) ), "bg-warning/15 text-warning" ) )"
                      EndContent="@_counter( 2 )">
        Actions
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( PanelsTopLeftIcon ) ), "bg-default/30 text-foreground" ) )"
                      EndContent="@_counter( 1 )">
        Projects
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( TagIcon ) ), "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 ring-default-200/30 ring-inset group-hover:bg-default-200/50">
                    <p class="text-tiny">v2.0.0-preview.1</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( typeof( UsersIcon ) ), "bg-orange-500/15 text-orange-500" ) )"
                      EndContent="@_counter( 2 )">
        Contributors
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( EyeIcon ) ), "bg-warning/15 text-warning" ) )"
                      EndContent="@_counter( 3 )">
        Watchers
    </LumexListboxItem>
    <LumexListboxItem StartContent="@_iconWrapper( new( _icon( typeof( ScaleIcon ) ), "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<Type> _icon = icon =>
        @<DynamicIcon Type="@icon" Size="18" />;

    private RenderFragment<int> _counter = counter =>
        @<div class="flex items-center gap-1 text-default-400">
            <span class="text-small">@counter</span>
            <ChevronRightIcon Size="16" />
        </div>;

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

    private ListboxItemSlots _itemClasses = new()
    {
        Base = "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12"
    };
}

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 🗙