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

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:
  1. Define an enum representing your options.
  2. Add the EnumInput component to your page, specifying the TEnum type parameter.
  3. Bind the selected value using @bind-Value or @bind-Text as needed.
  4. 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
    }
}

Colors #

The EnumInput component supports multiple color themes to match your application's style.

How to use:
  1. Set the Color parameter to one of the available EnumInputColor values (e.g., Primary, Success, Danger).
  2. Bind the selected value as usual.
This demo demonstrates how to apply different color styles to the EnumInput dropdown. 
<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 #

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

How to use:
  1. Set the Size parameter to one of the EnumInputSize values (Small, Normal, Medium, Large).
  2. Bind the selected value as needed.
This demo shows how to display EnumInput in different sizes for flexible layout integration. 
<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 #

The EnumInput component supports additional style options, such as rounded corners.

How to use:
  1. Set the IsRounded parameter to true to enable rounded styling.
  2. Bind the selected value as usual.
This demo illustrates how to apply a rounded style to the EnumInput dropdown. 
<EnumInput TEnum="Status" IsRounded="true" @bind-Value="@value1" />

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

    public enum Status
    {
        Active,
        Inactive,
        Pending
    }
}

States #

The EnumInput component can visually reflect different UI states, such as hovered, focused, or loading.

How to use:
  1. Set the State parameter to EnumInputState.Hovered, Focused, or Loading as needed.
  2. Bind the selected value for each state to observe the visual effect.
This demo shows how to display EnumInput in various UI states for enhanced user feedback. 
<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 #

The EnumInput component can be disabled to prevent user interaction.

How to use:
  1. Set the Disabled parameter to true to make the dropdown non-interactive.
  2. 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):
  1. Set the Value parameter and handle the ValueChanged event to respond to selection changes.
  2. 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" 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):
  1. Set the Text parameter and handle the TextChanged event to respond to text changes.
  2. 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" 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:
  1. Bind the Disabled parameter to a boolean property in your component.
  2. 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" @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
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!