Composition
This component is a composition of 2 key components:
- LumexSelect: A component representing a select input.
- LumexSelectItem: A component representing a select item.
Usage
The select component is used for collecting user provided information from a list of options.
<div class="flex w-full flex-wrap md:flex-nowrap gap-4">
<LumexSelect TValue="string"
Label="Favorite Animal"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Disabled
You can disable a select to prevent user interaction. A disabled select is faded and does not respond to user clicks.
You can achieve this by using the Disabled parameter on a Select.
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
Disabled="@true"
Value="@("cat")"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Alternatively, you can prevent user interaction by disabling specific items.
You can achieve this by using the DisabledItems parameter on a Select.
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
DisabledItems="@(["elephant", "lion", "tiger"])"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Read-Only
Set the select to read-only to display data without allowing modifications.
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
ReadOnly="@true"
Value="@("cat")"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Required
Mark the select as required to indicate that it must be filled out before form submission. An asterisk will appear at the end of the label.
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
Required="@true"
Value="@("cat")"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Sizes
The select supports multiple sizes to fit different layouts and design needs.
<div class="w-full grid grid-cols-1 gap-4">
@foreach( var size in Enum.GetValues<Size>() )
{
<div>
<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
<LumexSelect TValue="string"
Label="Favorite Animal"
Size="@size"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Size="@size"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
</div>
<small class="text-default-500 mt-1">@size</small>
</div>
}
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Radius
Adjust the border radius of the select for rounded or squared corners.
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
@foreach (var radius in Enum.GetValues<Radius>())
{
<div>
<LumexSelect TValue="string"
Label="Favorite Animal"
Radius="@radius"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<small class="text-default-500 mt-1">@radius</small>
</div>
}
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Colors
Customize the select color to match your theme or emphasize certain fields.
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
@foreach( var color in _colors )
{
<div>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Color="@color"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<small class="text-default-500 mt-1">@color</small>
</div>
}
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
private ThemeColor[] _colors = [
ThemeColor.Default,
ThemeColor.Primary,
ThemeColor.Secondary,
ThemeColor.Success,
ThemeColor.Warning,
ThemeColor.Danger,
ThemeColor.Info
];
}
Variants
Choose from different variants, such as Flat,
Underlined, or Outlined, for various visual styles.
<div class="w-full grid grid-cols-1 gap-4">
@foreach( var variant in Enum.GetValues<InputVariant>() )
{
<div>
<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
<LumexSelect TValue="string"
Label="Favorite Animal"
Variant="@variant"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Variant="@variant"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
</div>
<small class="text-default-500 mt-1">@variant</small>
</div>
}
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Label Placements
Position the label either inside or outside the select for flexibility in layout and design.
<div class="w-full grid grid-cols-1 gap-4">
@foreach( var placement in Enum.GetValues<LabelPlacement>() )
{
<div>
<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
<LumexSelect TValue="string"
Label="Favorite Animal"
LabelPlacement="@placement"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
LabelPlacement="@placement"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
</div>
<small class="text-default-500 mt-1">@placement</small>
</div>
}
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Start & End Content
Add custom content, such as icons or labels, to the start or end of the select for added functionality.
<div class="flex w-full flex-wrap md:flex-nowrap gap-4">
<LumexSelect TValue="string"
Label="Favorite Animal"
StartContent="@_petsIcon"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
EndContent="@_petsIcon"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
</div>
@code {
private RenderFragment _petsIcon = @<LumexIcon Icon="@Icons.Rounded.Pets" Size="@new("16")" />;
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Item Start & End Content
Add icons or elements to individual items within the listbox.
<LumexSelect TValue="string"
Label="Country"
Class="max-w-xs">
@foreach (var country in _countries)
{
<LumexSelectItem @key="@country"
Value="@country.Key"
TextValue="@country.Name"
StartContent="@_countryFlag(new(country.Name, country.Flag))">
@country.Name
</LumexSelectItem>
}
</LumexSelect>
@code {
private RenderFragment<(string Alt, string Src)> _countryFlag = flag =>
@<span class="w-6 h-6 flex rounded-full overflow-hidden ring-1 ring-default-200">
<img src="@flag.Src" alt="@flag.Alt" class="object-cover" />
</span>;
private Country[] _countries = [
new("estonia", "Estonia", "https://flagcdn.com/ee.svg"),
new("sweden", "Sweden", "https://flagcdn.com/se.svg"),
new("finland", "Finland", "https://flagcdn.com/fi.svg"),
new("germany", "Germany", "https://flagcdn.com/de.svg"),
new("france", "France", "https://flagcdn.com/fr.svg"),
new("spain", "Spain", "https://flagcdn.com/es.svg"),
new("belgium", "Belgium", "https://flagcdn.com/be.svg")
];
private record Country(string Key, string Name, string Flag);
}
Description
Provide a brief description below the select to offer guidance or additional context.
Select a favorite animal for recovery
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Description="Select a favorite animal for recovery"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
}
Error Message
Display an error message below the select to indicate validation issues.
You can combine the Invalid and ErrorMessage parameters to show an invalid input.
An error message is shown only when the Invalid parameter is set to true.
The second most popular pet in the world
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Description="The second most popular pet in the world"
ErrorMessage="@(_isValid ? "" : "You must select a cat")"
Invalid="@(!_isValid)"
Value="@_selectedValue"
ValueChanged="@OnAnimalSelect"
Class="max-w-xs">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
private string? _selectedValue;
private bool _isValid = true;
private void OnAnimalSelect(string? value)
{
_selectedValue = value;
_isValid = value is "cat";
}
}
Two-way Data Binding
The select 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.
Selected value:
Selected value:
<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
<div class="w-full flex flex-col gap-2">
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
Class="max-w-xs"
@bind-Value="@_valueOne">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<p class="text-sm text-default-500">
Selected value: @_valueOne
</p>
</div>
<div class="w-full flex flex-col gap-2">
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Class="max-w-xs"
Value="@_valueTwo"
ValueChanged="@OnValueChanged">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<p class="text-sm text-default-500">
Selected value: @_valueTwo
</p>
</div>
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
private string? _valueOne;
private string? _valueTwo;
private void OnValueChanged(string? value)
{
_valueTwo = value;
}
}
Multiple Selection
Use the @bind-Values directive,
or the Values and ValuesChanged parameters.
Selected values:
Selected values:
<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
<div class="w-full flex flex-col gap-2">
<LumexSelect Label="Favorite Animal"
Placeholder="Select an animal"
Class="max-w-xs"
@bind-Values="@_valuesOne">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<p class="text-sm text-default-500">
Selected values: @(string.Join(", ", _valuesOne ?? []))
</p>
</div>
<div class="w-full flex flex-col gap-2">
<LumexSelect TValue="string"
Label="Favorite Animal"
Placeholder="Select an animal"
Class="max-w-xs"
Values="@_valuesTwo"
ValuesChanged="@OnValuesChanged">
@foreach (var animal in _animals)
{
<LumexSelectItem @key="@animal" Value="@animal.Key">
@animal.Value
</LumexSelectItem>
}
</LumexSelect>
<p class="text-sm text-default-500">
Selected values: @(string.Join(", ", _valuesTwo ?? []))
</p>
</div>
</div>
@code {
private Dictionary<string, string> _animals = new()
{
["cat"] = "Cat",
["dog"] = "Dog",
["elephant"] = "Elephant",
["lion"] = "Lion",
["tiger"] = "Tiger",
["giraffe"] = "Giraffe",
["dolphin"] = "Dolphin",
["penguin"] = "Penguin",
["zebra"] = "Zebra",
["shark"] = "Shark",
["whale"] = "Whale",
["otter"] = "Otter",
["crocodile"] = "Crocodile"
};
private ICollection<string>? _valuesOne;
private ICollection<string>? _valuesTwo;
private void OnValuesChanged(ICollection<string>? values)
{
_valuesTwo = values;
}
}
Custom Items
You can customize the select items by modifying the
ChildContent of the SelectItem.
<LumexSelect TValue="Character"
Label="Assign To"
Placeholder="Select a character"
Class="max-w-xs">
@foreach (var character in _character)
{
<LumexSelectItem @key="@character"
Value="@character"
TextValue="@character.Name">
<div class="flex gap-2 items-center">
<span class="w-8 h-8 flex rounded-full overflow-hidden shrink-0">
<img src="@character.Avatar" alt="@character.Name" class="object-cover" />
</span>
<div class="flex flex-col">
<span class="text-small">@character.Name</span>
<span class="text-tiny text-default-400">@character.Email</span>
</div>
</div>
</LumexSelectItem>
}
</LumexSelect>
@code {
private Character[] _character = [
new(1, "Tony Stark", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png"),
new(2, "Natasha Romanoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png"),
new(3, "Steve Rogers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png"),
new(4, "Bruce Banner", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png"),
new(5, "Carol Danvers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png"),
new(6, "Thor Odinson", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png"),
new(7, "Wanda Maximoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png"),
new(8, "Pepper Potts", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png"),
new(9, "Peter Parker", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png"),
new(10, "Hope van Dyne", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png"),
new(11, "Stephen Strange", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/6.png"),
new(12, "Shuri", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/6.png")
];
private record Character(int Id, string Name, string Email, string Avatar);
}
Custom Values
You can also customize the value representation of selected items
by providing the ValueContent to the Select.
<LumexSelect TValue="Character"
Label="Assign To"
Placeholder="Select a character"
LabelPlacement="@LabelPlacement.Outside"
Classes="@(new() { Root = "max-w-xs", Trigger = "h-12" } )">
<ChildContent>
@foreach (var character in _character)
{
<LumexSelectItem @key="@character" Value="@character">
<div class="flex gap-2 items-center">
<span class="w-8 h-8 flex rounded-full overflow-hidden shrink-0">
<img src="@character.Avatar" alt="@character.Name" class="object-cover" />
</span>
<div class="flex flex-col">
<span class="text-small">@character.Name</span>
<span class="text-tiny text-default-400">@character.Email</span>
</div>
</div>
</LumexSelectItem>
}
</ChildContent>
<ValueContent>
<div class="flex items-center gap-2">
<span class="w-8 h-8 flex rounded-full overflow-hidden shrink-0">
<img src="@context.Avatar" alt="@context.Name" class="object-cover" />
</span>
<div class="flex flex-col">
<span>@context.Name</span>
<span class="text-default-500 text-tiny">(@context.Email)</span>
</div>
</div>
</ValueContent>
</LumexSelect>
@code {
private Character[] _character = [
new(1, "Tony Stark", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png"),
new(2, "Natasha Romanoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png"),
new(3, "Steve Rogers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png"),
new(4, "Bruce Banner", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png"),
new(5, "Carol Danvers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png"),
new(6, "Thor Odinson", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png"),
new(7, "Wanda Maximoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png"),
new(8, "Pepper Potts", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png"),
new(9, "Peter Parker", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png"),
new(10, "Hope van Dyne", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png"),
new(11, "Stephen Strange", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/6.png"),
new(12, "Shuri", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/6.png")
];
private record Character(int Id, string Name, string Email, string Avatar);
}
Custom Styles
This component supports named slots that allow you to apply custom CSS to specific parts of the component.
- Root: The main container for the entire select component.
- Label: The label of the select.
- MainWrapper: Wraps the helper wrapper and the trigger slots.
- Trigger: The trigger button of the select.
- InnerWrapper: The wrapper of the start/end content and the value.
- SelectorIcon: The selector icon of the select.
- Value: The select value.
- Listbox: The listbox component slot.
- PopoverContent: The popover content slot.
- HelperWrapper: The wrapper of a description and an error message.
- Description: The description of the select.
- ErrorMessage: The error message of the select.
You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:
Select
Class: The CSS class names to style the select wrapper.Classes: The CSS class names to style the select slots.
Select Item
Class: The CSS class names to style the select item wrapper.Classes: The CSS class names to style the select item slots.
<LumexSelect TValue="Character"
Label="Assign To"
Classes="@_selectClasses"
PopoverClasses="@_popoverClasses"
ListboxClasses="@_listboxClasses">
<ChildContent>
@foreach (var character in _character)
{
<LumexSelectItem @key="@character"
Value="@character"
Classes="@_selectItemClasses">
<div class="flex gap-2 items-center">
<span class="w-8 h-8 flex rounded-full overflow-hidden shrink-0">
<img src="@character.Avatar" alt="@character.Name" class="object-cover" />
</span>
<div class="flex flex-col">
<span class="text-small">@character.Name</span>
<span class="text-tiny text-default-400">@character.Email</span>
</div>
</div>
</LumexSelectItem>
}
</ChildContent>
<ValueContent>
<div class="flex items-center gap-2">
<span class="w-8 h-8 flex rounded-full overflow-hidden shrink-0">
<img src="@context.Avatar" alt="@context.Name" class="object-cover" />
</span>
<div class="flex flex-col">
<span>@context.Name</span>
<span class="text-default-500 text-tiny">(@context.Email)</span>
</div>
</div>
</ValueContent>
</LumexSelect>
@code {
private Character[] _character = [
new(1, "Tony Stark", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png"),
new(2, "Natasha Romanoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png"),
new(3, "Steve Rogers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png"),
new(4, "Bruce Banner", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png"),
new(5, "Carol Danvers", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png"),
new(6, "Thor Odinson", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png"),
new(7, "Wanda Maximoff", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png"),
new(8, "Pepper Potts", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png"),
new(9, "Peter Parker", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png"),
new(10, "Hope van Dyne", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png"),
new(11, "Stephen Strange", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/male/6.png"),
new(12, "Shuri", "[email protected]", "https://d2u8k2ocievbld.cloudfront.net/memojis/female/6.png")
];
private SelectSlots _selectClasses = new()
{
Label = "text-default-700 group-data-[filled=true]:-translate-y-5",
Trigger = ElementClass.Empty()
.Add("min-h-16")
.Add("shadow-xl")
.Add("bg-default-200/50")
.Add("backdrop-blur-xl")
.Add("backdrop-saturate-200")
.Add("hover:bg-default-200/70")
.Add("group-data-[focus=true]:bg-default-200/85")
.ToString(),
};
private ListboxItemSlots _selectItemClasses = new()
{
Root = ElementClass.Empty()
.Add("rounded-md")
.Add("text-default-500")
.Add("transition-opacity")
.Add("hover:text-foreground")
.Add("hover:bg-default-100")
.ToString()
};
private PopoverSlots _popoverClasses = new()
{
Content = "p-0 border border-divider bg-background"
};
private ListboxSlots _listboxClasses = new()
{
Root = "[mask-image:linear-gradient(#000,#000,transparent_0,#000_40px,#000_calc(100%_-_40px),transparent)]",
};
private record Character(int Id, string Name, string Email, string Avatar);
}
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.