CodeInputExample1.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center" Style="height: 500px">
        <MudCodeInput T="string" @bind-Value="@_value" Count="@_count" Spacing="_spacing" Variant="@_variant" Margin="_margin"
                      Disabled="@_disabled" ReadOnly="@_readonly" />
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="2">
            <MudText>Value: @_value</MudText>
            <MudTextField @bind-Value="@_value" Immediate="true" Label="Two Way Bind Controller" Variant="Variant.Outlined" />
            <MudNumericField @bind-Value="_count" Label="Count" Variant="Variant.Outlined" />
            <MudNumericField @bind-Value="_spacing" Label="Spacing" Variant="Variant.Outlined" />
            <MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
                @foreach (var item in Enum.GetValues<Variant>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSelect @bind-Value="_margin" Variant="Variant.Outlined" Label="Margin">
                @foreach (var item in Enum.GetValues<Margin>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSwitchM3 @bind-Value="@_disabled" Label="Disabled" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Secondary" />
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    string? _value;
    int _count = 4;
    int _spacing = 2;
    Variant _variant = Variant.Outlined;
    Margin _margin;
    bool _disabled;
    bool _readonly;
}