\n**Basic**: ```razor

Value: @basicValue

``` ```csharp private string? basicValue; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**MultiSelect**: ```razor

Values: @string.Join(", ", multiValues ?? [])

``` ```csharp private IEnumerable? multiValues; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**Description & icon**: ```razor ``` ```csharp private readonly List> iconItems = [ new() { Text = "Standard", Description = "3 to 5 days, free", IconName = BitIconName.Car, Value = "standard" }, new() { Text = "Express", Description = "Next day, $9.99", IconName = BitIconName.Airplane, Value = "express" }, new() { Text = "Pick up", Description = "From a store near you", IconName = BitIconName.Shop, Value = "pickup" } ]; ``` \n**Disabled**: ```razor ``` ```csharp private readonly List> disabledItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana", IsDisabled = true }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape", IsDisabled = true }, new() { Text = "Orange", Value = "orange" } ]; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**ReadOnly**: ```razor ``` ```csharp private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**MaxHeight**: ```razor

Value: @countryValue

``` ```csharp private string? countryValue; private readonly List> countryItems = [ .. new[] { "Argentina", "Australia", "Austria", "Belgium", "Brazil", "Canada", "Chile", "China", "Denmark", "Egypt", "Finland", "France", "Germany", "Greece", "India", "Indonesia", "Iran", "Ireland", "Italy", "Japan", "Mexico", "Netherlands", "Norway", "Poland", "Portugal", "Spain", "Sweden", "Turkey" }.Select(name => new BitListBoxItem { Text = name, Value = name }) ]; ``` \n**Validation**: ```razor Submit

Submitted: @validationResult

``` ```csharp public class ListBoxValidationModel { [Required(ErrorMessage = "Pick a fruit.")] public string? Fruit { get; set; } [MinLength(2, ErrorMessage = "Pick at least two fruits.")] public IEnumerable? Fruits { get; set; } = []; public override string ToString() => $"{Fruit} / {string.Join(", ", Fruits ?? [])}"; } private readonly ListBoxValidationModel validationModel = new(); private string? validationResult; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**Events**: ```razor

Last event: @eventsLog

``` ```csharp private string? eventsLog; private void HandleOnSelectItem(BitListBoxItem item) => eventsLog = $"Selected {item.Text}"; private void HandleOnDeselectItem(BitListBoxItem item) => eventsLog = $"Deselected {item.Text}"; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**External Icons**: ```razor ``` ```csharp private readonly List> externalIconItems1 = [ new() { Text = "Car", Icon = "fa-solid fa-car", Value = "car" }, new() { Text = "Train", Icon = BitIconInfo.Fa("solid train"), Value = "train" }, new() { Text = "Plane", Icon = BitIconInfo.Fa("solid plane"), Value = "plane" } ]; private readonly List> externalIconItems2 = [ new() { Text = "Bike", Icon = BitIconInfo.Bi("bicycle"), Value = "bike" }, new() { Text = "Bus", Icon = BitIconInfo.Bi("bus-front"), Value = "bus" }, new() { Text = "Taxi", Icon = BitIconInfo.Bi("taxi-front"), Value = "taxi" } ]; ``` \n**Style & Class**: ```razor ``` ```csharp private readonly List> styleClassItems = [ new() { Text = "Apple", Value = "apple", Style = "color: seagreen;" }, new() { Text = "Banana", Value = "banana", Class = "custom-item" }, new() { Text = "Cherry", Value = "cherry" } ]; private readonly List> basicItems = [ new() { Text = "Apple", Value = "apple" }, new() { Text = "Banana", Value = "banana" }, new() { Text = "Cherry", Value = "cherry" }, new() { Text = "Grape", Value = "grape" }, new() { Text = "Orange", Value = "orange" } ]; ``` \n**RTL**: ```razor

``` ```csharp private readonly List> rtlItems = [ new() { Text = "سیب", Value = "apple" }, new() { Text = "موز", Value = "banana" }, new() { Text = "گیلاس", Value = "cherry" } ]; ```

\n**Basic**: ```razor

Value: @basicValue

Values: @string.Join(", ", multiValues ?? [])

``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private IEnumerable? multiValues; private readonly List basicItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana" }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape" }, new() { Name = "Orange", Code = "orange" } ]; ``` \n**Description & icon**: ```razor ``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private readonly List iconItems = [ new() { Name = "Standard", Note = "3 to 5 days, free", Symbol = BitIconName.Car, Code = "standard" }, new() { Name = "Express", Note = "Next day, $9.99", Symbol = BitIconName.Airplane, Code = "express" }, new() { Name = "Pick up", Note = "From a store near you", Symbol = BitIconName.Shop, Code = "pickup" } ]; ``` \n**Disabled**: ```razor ``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private readonly List disabledItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana", OutOfSeason = true }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape", OutOfSeason = true }, new() { Name = "Orange", Code = "orange" } ]; private readonly List basicItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana" }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape" }, new() { Name = "Orange", Code = "orange" } ]; ``` \n**ReadOnly**: ```razor ``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private readonly List basicItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana" }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape" }, new() { Name = "Orange", Code = "orange" } ]; ``` \n**MaxHeight**: ```razor

Value: @countryValue

Submitted: @validationResult

Last event: @eventsLog

``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private string? eventsLog; private void HandleOnSelectItem(Produce item) => eventsLog = $"Selected {item.Name}"; private void HandleOnDeselectItem(Produce item) => eventsLog = $"Deselected {item.Name}"; private readonly List basicItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana" }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape" }, new() { Name = "Orange", Code = "orange" } ]; ``` \n**External Icons**: ```razor ``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private readonly List externalIconItems1 = [ new() { Name = "Car", Glyph = "fa-solid fa-car", Code = "car" }, new() { Name = "Train", Glyph = BitIconInfo.Fa("solid train"), Code = "train" }, new() { Name = "Plane", Glyph = BitIconInfo.Fa("solid plane"), Code = "plane" } ]; private readonly List externalIconItems2 = [ new() { Name = "Bike", Glyph = BitIconInfo.Bi("bicycle"), Code = "bike" }, new() { Name = "Bus", Glyph = BitIconInfo.Bi("bus-front"), Code = "bus" }, new() { Name = "Taxi", Glyph = BitIconInfo.Bi("taxi-front"), Code = "taxi" } ]; ``` \n**Style & Class**: ```razor ``` ```csharp public class Produce { public string? Name { get; set; } public string? Code { get; set; } public string? Note { get; set; } public string? Symbol { get; set; } public BitIconInfo? Glyph { get; set; } public bool OutOfSeason { get; set; } public string? Css { get; set; } public string? Inline { get; set; } } private static readonly BitListBoxNameSelectors nameSelectors = new() { Text = { Name = nameof(Produce.Name) }, Value = { Name = nameof(Produce.Code) }, Description = { Name = nameof(Produce.Note) }, IconName = { Name = nameof(Produce.Symbol) }, Icon = { Selector = p => p.Glyph }, IsDisabled = { Name = nameof(Produce.OutOfSeason) }, Class = { Name = nameof(Produce.Css) }, Style = { Name = nameof(Produce.Inline) }, }; private readonly List styleClassItems = [ new() { Name = "Apple", Code = "apple", Inline = "color: seagreen;" }, new() { Name = "Banana", Code = "banana", Css = "custom-item" }, new() { Name = "Cherry", Code = "cherry" } ]; private readonly List basicItems = [ new() { Name = "Apple", Code = "apple" }, new() { Name = "Banana", Code = "banana" }, new() { Name = "Cherry", Code = "cherry" }, new() { Name = "Grape", Code = "grape" }, new() { Name = "Orange", Code = "orange" } ]; ``` \n**RTL**: ```razor

\n**Basic**: ```razor

Value: @basicValue

``` ```csharp private string? basicValue; ``` \n**MultiSelect**: ```razor

Values: @string.Join(", ", multiValues ?? [])

``` ```csharp private IEnumerable? multiValues; ``` \n**Description & icon**: ```razor ``` \n**Disabled**: ```razor ``` \n**ReadOnly**: ```razor ``` \n**MaxHeight**: ```razor @foreach (var country in countries) { }

Value: @countryValue

``` ```csharp private string? countryValue; private static readonly string[] countries = [ "Argentina", "Australia", "Austria", "Belgium", "Brazil", "Canada", "Chile", "China", "Denmark", "Egypt", "Finland", "France", "Germany", "Greece", "India", "Indonesia", "Iran", "Ireland", "Italy", "Japan", "Mexico", "Netherlands", "Norway", "Poland", "Portugal", "Spain", "Sweden", "Turkey" ]; ``` \n**Validation**: ```razor Submit

Submitted: @validationResult

Last event: @eventsLog

``` ```csharp private string? eventsLog; private void HandleOnSelectItem(BitListBoxOption item) => eventsLog = $"Selected {item.Text}"; private void HandleOnDeselectItem(BitListBoxOption item) => eventsLog = $"Deselected {item.Text}"; ``` \n**External Icons**: ```razor ``` \n**Style & Class**: ```razor ``` \n**RTL**: ```razor

```