Forms

<EditForm Model="_model" OnValidSubmit="HandleSubmit" OnInvalidSubmit="HandleInvalidSubmit" FormName="demoForm">
    <DataAnnotationsValidator />

    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
        <BOBInputText @bind-Value="_model.FullName"
                      Label="Full name"
                      HelperText="Enter your first and last name."
                      Required="true" />

        <BOBInputText @bind-Value="_model.Email"
                      Label="Email"
                      HelperText="A valid email address is required."
                      Required="true" />

        <BOBInputNumber TValue="int" @bind-Value="_model.Age"
                        Label="Age"
                        HelperText="Must be between 18 and 120."
                        Min="18"
                        Max="120"
                        Required="true" />

        <BOBInputDateTime TValue="DateTime?" @bind-Value="_model.BirthDate"
                          Label="Birth date"
                          HelperText="Select your date of birth."
                          Required="true" />

        <BOBInputDropdown @bind-Value="_model.Country"
                          Label="Country"
                          HelperText="Select your country of residence."
                          Required="true"
                          Searchable="true"
                          SearchPlaceholder="Search country...">
            <DropdownOption TOption="string" Value="@("us")">United States</DropdownOption>
            <DropdownOption TOption="string" Value="@("mx")">Mexico</DropdownOption>
            <DropdownOption TOption="string" Value="@("ca")">Canada</DropdownOption>
            <DropdownOption TOption="string" Value="@("es")">Spain</DropdownOption>
            <DropdownOption TOption="string" Value="@("fr")">France</DropdownOption>
            <DropdownOption TOption="string" Value="@("de")">Germany</DropdownOption>
            <DropdownOption TOption="string" Value="@("uk")">United Kingdom</DropdownOption>
            <DropdownOption TOption="string" Value="@("jp")">Japan</DropdownOption>
        </BOBInputDropdown>

        <BOBInputRadio @bind-Value="_model.Gender"
                       Label="Gender"
                       HelperText="Select your gender."
                       Required="true"
                       Orientation="RadioOrientation.Horizontal">
            <RadioOption Value="@("female")">Female</RadioOption>
            <RadioOption Value="@("male")">Male</RadioOption>
            <RadioOption Value="@("other")">Other</RadioOption>
            <RadioOption Value="@("prefer_not_to_say")">Prefer not to say</RadioOption>
        </BOBInputRadio>

        <BOBInputCheckbox @bind-Value="_model.AcceptTerms"
                          Label="Accept terms and conditions"
                          HelperText="You must accept to continue."
                          Required="true" />

        <BOBInputSwitch @bind-Value="_model.Newsletter"
                        Label="Subscribe to newsletter"
                        HelperText="Receive product updates and news." />

        <div style="display: flex; gap: 1rem; margin-top: 1rem;">
            <BOBButton Text="Submit" Type="BOBButtonType.Submit"
                       BackgroundColor="@PaletteColor.Primary"
                       Color="@PaletteColor.PrimaryContrast" />
            <BOBButton Text="Reset" Type="BOBButtonType.Reset"
                       OnClick="HandleReset" />
        </div>

        @if (!string.IsNullOrEmpty(_submitMessage))
        {
            <div style="margin-top: 1rem; padding: 1rem; background-color: var(--palette-success); color: #020202;">
                @_submitMessage
            </div>
        }
    </div>
</EditForm>