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.

Parameters

Name	Type	Default	Required	Description	Added Version
Disabled	bool	false		Gets or sets the disabled state.	3.5.0
Size	EnumInputSize	EnumInputSize.None		Gets or sets the size of the input.	3.5.0
Text	string	null		Gets or sets the display text.	3.5.0
Value	string	0	✔️	Gets or sets the value.	3.5.0

Methods

Name	Returns	Description	Added Version
Disable()	void	Disables the enum input.	3.5.0
Enable()	void	Enables the enum input.	3.5.0

Events

Name	Description	Added Version
ValueChanged	This event fires when the Value property changes.	3.5.0
TextChanged	This 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.

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

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

<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