Index.razor

@page "/"

<style>
    .my-fl {
        width: 350px;
    }

    .top-margin > div {
        margin-top: unset !important;
    }
</style>

<DxFormLayout CssClass="my-fl" CaptionPosition="CaptionPosition.Vertical">
    <DxFormLayoutGroup Caption="Contact Me By:">
        <DxFormLayoutItem>
            <DxRadioGroup Items="@ContactMethod"
                          @bind-Value="@PreferredContactMethod" />
        </DxFormLayoutItem>
        <DxFormLayoutItem CssClass="top-margin" Visible="@IsEmail">
            <DxCheckBox LabelPosition="LabelPosition.Right" @bind-Checked="IsAlternateEmail">Alternate E-mail</DxCheckBox>
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Visible="@IsEmail" Caption="Contact Details:">
        <DxFormLayoutItem Caption="E-mail:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Retype E-mail:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Alternate E-mail:" ColSpanMd="12" Visible=@IsAlternateEmail>
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Retype Alternate E-mail:" ColSpanMd="12" Visible=@IsAlternateEmail>
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Visible="@IsPhone" Caption="Contact Details:">
        <DxFormLayoutItem Caption="Code:" ColSpanMd="3">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Phone:" ColSpanMd="9">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Visible="@IsPost" Caption="Contact Details:">
        <DxFormLayoutItem Caption="Address:" ColSpanMd="12">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="City:" ColSpanMd="8">
            <DxTextBox />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Zip Code:" ColSpanMd="4">
            <DxTextBox />
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

@code {
    bool IsEmail => PreferredContactMethod == "E-mail";
    bool IsPhone => PreferredContactMethod == "Phone";
    bool IsPost => PreferredContactMethod == "Post";
    bool isAlternateEmail = false;
    bool IsAlternateEmail { get => isAlternateEmail; set { isAlternateEmail = value; InvokeAsync(StateHasChanged); } }

    IEnumerable<string> ContactMethod = new[] { "E-mail", "Phone", "Post" };
    string PreferredContactMethod { get; set; } = "E-mail";
}