EnumInput

The EnumInput component is used to show enum values in a dropdown list. It is a simple and effective way to allow users to select from a predefined set of options.

API Documentation

Example #

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

Colors #

You can use the Color parameter to set the color of the EnumInput component. The available colors are: Link, Primary, Info, Success, Warning, and Danger. 
<EnumInput TEnum="Status" Color="EnumInputColor.Link" @bind-Value="@value1" />
<EnumInput TEnum="Status" Color="EnumInputColor.Primary" @bind-Value="@value2" />
<EnumInput TEnum="Status" Color="EnumInputColor.Info" @bind-Value="@value3" />
<EnumInput TEnum="Status" Color="EnumInputColor.Success" @bind-Value="@value4" />
<EnumInput TEnum="Status" Color="EnumInputColor.Warning" @bind-Value="@value5" />
<EnumInput TEnum="Status" Color="EnumInputColor.Danger" @bind-Value="@value6" />

@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;
    private int value6 = (int)Status.Pending;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Sizes #

You can use the Size parameter to set the size of the EnumInput component. The available sizes are: Small, Normal, Medium, and Large. 
<EnumInput TEnum="Status" @bind-Value="@value1" />
<EnumInput TEnum="Status" Size="EnumInputSize.Small" @bind-Value="@value2" />
<EnumInput TEnum="Status" Size="EnumInputSize.Normal" @bind-Value="@value3" />
<EnumInput TEnum="Status" Size="EnumInputSize.Medium" @bind-Value="@value4" />
<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
    }
}

Styles #

You can create rounded EnumInput component by using the IsRounded parameter. In the example below, IsRounded parameter is set to true. 
<EnumInput TEnum="Status" IsRounded="true" @bind-Value="@value1" />

@code {
    private int value1 = (int)Status.Pending;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

States #

<EnumInput TEnum="Status" @bind-Value="@value1" />
<EnumInput TEnum="Status" State="EnumInputState.Hovered" @bind-Value="@value2" />
<EnumInput TEnum="Status" State="EnumInputState.Focused" @bind-Value="@value3" />
<EnumInput TEnum="Status" State="EnumInputState.Loading" @bind-Value="@value4" />

@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;

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

Disabled #

You can disable the EnumInput component by using the Disabled parameter. In the example below, Disabled parameter is set to true. 
<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 has two events: ValueChanged and TextChanged.

ValueChanged #

The ValueChanged event is triggered when the value of the EnumInput component changes.
Selected value: 2
<EnumInput TEnum="Status" 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 #

The TextChanged event is triggered when the text of the EnumInput component changes.
Selected text: Pending
<EnumInput TEnum="Status" 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 has two methods: Enable() and Disable(). You can use these methods to enable or disable the EnumInput component programmatically.

Enable() and Disable() #

<EnumInput TEnum="Status" @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
    }
}
If you like BlazorExpress.Bulma, give it a star on GitHub!