ChipFieldExample1.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center">
        <MudChipField @ref="_chipField" T="string" @bind-Value="_value" @bind-Values="_values" StyleChip="@(_disableRadius ? "border-radius: 0 !important" : null)" Delimiter="@_delimiter" FullWidth="true"
                      Disabled="_disabled" ReadOnly="_readonly" ChipColor="_color" ChipVariant="_chipVariant" ChipSize="_chipSize" WrapChips="_wrapChips" BackspaceChipRemoval="@_backspaceChipRemoval"
                      MaxChips="_maxChips" ChipsMaxWidth="_chipsMaxWidth" Closeable="_closeable" Variant="_variant" Label="ChipField" AllowSameValues="@_allowSameValues" />
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="2">
            <MudText>Value: @_value</MudText>
            <MudText>Values:
                @foreach (var item in _values ?? new List<string>())
                {
                    <MudText HtmlTag="span"> @(" " + item + " ") </MudText>
                }
            </MudText>
            <MudTextField @bind-Value="@_delimiter" Immediate="true" Label="Delimiter" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_maxChips" Label="MaxChips" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_chipsMaxWidth" Label="ChipsMaxWidth" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color" Margin="Margin.Dense" Dense="true">
                @foreach (var item in Enum.GetValues<Color>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSelect @bind-Value="_chipVariant" Variant="Variant.Outlined" Label="Chip Variant" Margin="Margin.Dense" Dense="true">
                @foreach (var item in Enum.GetValues<Variant>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant" Margin="Margin.Dense" Dense="true">
                @foreach (var item in Enum.GetValues<Variant>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSelect @bind-Value="_chipSize" Variant="Variant.Outlined" Label="ChipSize" Margin="Margin.Dense" Dense="true">
                @foreach (var item in Enum.GetValues<Size>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSwitchM3 @bind-Value="@_wrapChips" Label="WrapChips" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_disabled" Label="Disabled" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_disableRadius" Label="Disable Border Radius" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_closeable" Label="Closeable" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_allowSameValues" Label="Allow Same Values" Color="Color.Secondary" />
            <MudSwitchM3 @bind-Value="@_backspaceChipRemoval" Label="Backspace Chip Removal" Color="Color.Secondary" />
            <MudButton Color="Color.Secondary" Variant="Variant. Outlined" OnClick="@(async() => await _chipField.ClearTextField())">Clear Text Field</MudButton>
        </MudStack>
    </MudItem>
</MudGrid>

@code{
    MudChipField<string> _chipField = new();
    string _delimiter = " ";
    string? _value;
    List<string>? _values;
    int _maxChips = 0;
    int _chipsMaxWidth = 80;
    Color _color = Color.Default;
    Variant _chipVariant = Variant.Filled;
    Variant _variant = Variant.Outlined;
    Size _chipSize = Size.Medium;
    bool _wrapChips;
    bool _disabled;
    bool _readonly;
    bool _disableRadius;
    bool _closeable = true;
    bool _allowSameValues = false;
    bool _backspaceChipRemoval = true;
}