Blazor Bootstrap Demos & Examples | Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks

How it works #

The EnumInput component displays enum values in a dropdown, allowing users to select from a predefined set of options.
How to use:

Define an enum representing your options.
Add the EnumInput component to your page, specifying the TEnum type parameter.
Bind the selected value using @bind-Value or @bind-Text as needed.
Use the selected value or text in your logic as shown in the demo.

This demo shows how to bind both the enum value and text, and how to display the selected result.

Selected value: 2

Selected text: Inactive

<EnumInput TEnum="Status" @bind-Value="@selectedStatusValue" />
<div class="mb-3">Selected value: @selectedStatusValue</div>

<EnumInput TEnum="Status" @bind-Text="@selectedStatusText" />
<div class="mb-3">Selected text: @selectedStatusText</div>

@code {
    private int selectedStatusValue;
    private string? selectedStatusText;

    override protected void OnInitialized()
    {
        selectedStatusValue = (int)Status.Pending;
        selectedStatusText = Status.Inactive.ToString();
    }

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Sizes #

The EnumInput component can be rendered in various sizes to fit different UI requirements.
How to use:

Set the Size parameter to one of the EnumInputSize values (Small, Normal, Large).
Bind the selected value as needed.

This demo shows how to display EnumInput in different sizes for flexible layout integration.

<EnumInput TEnum="Status" Class="mb-3" @bind-Value="@value1" />
<EnumInput TEnum="Status" Size="EnumInputSize.Small" Class="mb-3" @bind-Value="@value2" />
<EnumInput TEnum="Status" Size="EnumInputSize.Normal" Class="mb-3" @bind-Value="@value3" />
<EnumInput TEnum="Status" Size="EnumInputSize.Large" @bind-Value="@value5" />

@code {
    private int value1 = (int)Status.Pending;
    private int value2 = (int)Status.Pending;
    private int value3 = (int)Status.Pending;
    private int value4 = (int)Status.Pending;
    private int value5 = (int)Status.Pending;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Disabled #

The EnumInput component can be disabled to prevent user interaction.

How to use:

Set the Disabled parameter to true to make the dropdown non-interactive.
Bind the value as usual; the user will not be able to change it.

This demo demonstrates how to render EnumInput in a disabled state.

<EnumInput TEnum="Status" @bind-Value="@value1" Disabled="true" />

@code {
    private int value1 = (int)Status.Pending;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Events #

The EnumInput component supports event callbacks for value and text changes, enabling custom logic when the selection changes.
How to use (ValueChanged):

Set the Value parameter and handle the ValueChanged event to respond to selection changes.
Update your logic based on the new value in the event handler.

This demo shows how to handle value changes using the ValueChanged event.

Selected value: 2

<EnumInput TEnum="Status" Class="mb-3" Value="@value1" ValueChanged="OnValueChanged" />
<div>Selected value: @value1</div>

@code {
    private int value1 = (int)Status.Pending;

    private void OnValueChanged(int value)
    {
        value1 = value;

        if (value == (int)Status.Active)
        {
            // Do something when the value is Active
        }
        else if (value == (int)Status.Inactive)
        {
            // Do something when the value is Inactive
        }
        else if (value == (int)Status.Pending)
        {
            // Do something when the value is Pending
        }
    }

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

How to use (TextChanged):

Set the Text parameter and handle the TextChanged event to respond to text changes.
Update your logic based on the new text in the event handler.

This demo shows how to handle text changes using the TextChanged event.

Selected text: Pending

<EnumInput TEnum="Status" Class="mb-3" Text="@text1" TextChanged="OnTextChanged" />
<div>Selected text: @text1</div>

@code {
    private string text1 = Status.Pending.ToString();

    private void OnTextChanged(string value)
    {
        text1 = value;

        if (value == "Active")
        {
            // Do something when the text is "Active"
        }
        else if (value == "Inactive")
        {
            // Do something when the text is "Inactive"
        }
        else if (value == "Pending")
        {
            // Do something when the text is "Pending"
        }
    }

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Mehods #

The EnumInput component can be enabled or disabled dynamically at runtime.
How to use:

Bind the Disabled parameter to a boolean property in your component.
Update the property in your code (e.g., via button click) to enable or disable the EnumInput as needed.

This demo demonstrates how to programmatically enable or disable the EnumInput component.

<EnumInput TEnum="Status" Class="mb-3" @bind-Value="@value1" Disabled="isDisabled" />

<Buttons Size="ButtonSize.Small" Class="mt-3">
    <Button Color="ButtonColor.Primary" @onclick="EnableInput">Enable</Button>
    <Button Color="ButtonColor.Danger" @onclick="DisableInput">Disable</Button>
</Buttons>

@code {
    private bool isDisabled = true;
    private int value1 = (int)Status.Pending;

    private void EnableInput()
    {
        isDisabled = false;
    }

    private void DisableInput()
    {
        isDisabled = true;
    }

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Blazor EnumInput

How it works #

Sizes #

Disabled #

Events #

Mehods #

Links

Guides

Community

Blazor Express