Skip to main content

Blazor Enum Input

The Blazor Bootstrap EnumInput component renders a dropdown list from an enumeration (enum), enabling users to select from a predefined set of options. It simplifies data entry by binding directly to enum types and supports customization with sizes.

Blazor Bootstrap: Enum Input Component

Parameters​

NameTypeDefaultRequiredDescriptionAdded Version
DisabledboolfalseGets or sets the disabled state.3.5.0
SizeEnumInputSizeEnumInputSize.NoneGets or sets the size of the input.3.5.0
TextstringnullGets or sets the display text.3.5.0
Valuestring0✔️Gets or sets the value.3.5.0

Methods​

NameReturnsDescriptionAdded Version
Disable()voidDisables the enum input.3.5.0
Enable()voidEnables the enum input.3.5.0

Events​

NameDescriptionAdded Version
ValueChangedThis event fires when the Value property changes.3.5.0
TextChangedThis event fires when the Text property changes.3.5.0

Examples​

How it works​

The EnumInput component displays enum values in a dropdown, allowing users to select from a predefined set of options. Enum labels use DisplayAttribute.GetName() when a DisplayAttribute is present, including resource-backed names, and fall back to the enum member name when no display metadata exists.

Blazor Bootstrap Enum Input Component - How it works
<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>
@using System.ComponentModel.DataAnnotations

@code {
    private int selectedStatusValue;
    private string? selectedStatusText;

    override protected void OnInitialized()
    {
        selectedStatusValue = (int)Status.Active;
        selectedStatusText = StatusLabels.Pending;
    }

    public enum Status
    {
        Active,
        [Display(Name = "Inactive user")]
        Inactive,

        [Display(Name = nameof(StatusLabels.Pending), ResourceType = typeof(StatusLabels))]
        Pending
    }

    public static class StatusLabels
    {
        public static string Pending => "Waiting for review";
    }
}

See demo here

Sizes​

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

Blazor Bootstrap Enum Input Component - Sizes
<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
    }
}

See demo here

Disabled​

Use the Disabled parameter to disable the EnumInput.

Blazor Bootstrap Enum Input Component - Disable
<EnumInput TEnum="Status" @bind-Value="@value1" Disabled="true" />
@code {
    private int value1 = (int)Status.Pending;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

See demo here

Events​

The EnumInput component supports event callbacks for value and text changes, enabling custom logic when the selection changes.

ValueChanged Event

<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
    }
}

TextChanged Event

<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
    }
}

See demo here

Methods​

The EnumInput component can be enabled or disabled dynamically at runtime.

<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
    }
}

See demo here