EditFormModelDemo.razor

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <p>
        <label>
            Identifier:
            <InputText 
                class="[ w-full h-full ] [ px-4 py-2 ] [ border-2 border-gray-200 ] [ focus:outline-hidden focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea
                class="[ w-full h-full ] [ px-4 py-2 ] [ border-2 border-gray-200 ] [ focus:outline-hidden focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect 
                class="[ w-full h-full ] [ px-4 py-2 ] [ border-2 border-gray-200 ] [ focus:outline-hidden focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                @bind-Value="starship.Classification">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber
                class="[ w-full h-full ] [ px-4 py-2 ] [ border-2 border-gray-200 ] [ focus:outline-hidden focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate 
                class="[ w-full h-full ] [ px-4 py-2 ] [ border-2 border-gray-200 ] [ focus:outline-hidden focus:border-gray-400 ] [ dark:bg-black dark:border-gray-800 dark:focus:border-b-white dark:md:focus:border-blue-800 dark:caret-white dark:text-white ]"
                @bind-Value="starship.ProductionDate" />
        </label>
    </p>

    <button type="submit"
            class="[ bg-fuchsia-500 ] [ px-4 py-2 ] [ inline-block ] [ rounded-md ]">Submit</button>

    <p>
        @message
    </p>
</EditForm>

@code {
    public class Starship
    {
        public string? Identifier { get; set; }

        public string? Description { get; set; }

        public string? Classification { get; set; }

        public int MaximumAccommodation { get; set; }

        public bool IsValidatedDesign { get; set; }

        public DateTime ProductionDate { get; set; }
    }

    private Starship starship = new() { ProductionDate = DateTime.UtcNow };
    private string? message;

    private void HandleValidSubmit()
    {
        message = "HandleValidSubmit called";

        // Process the valid form
    }
}