Fieldset

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="fieldset-address" MaxWidth="28.Rem" Grow>
    <Fieldset Label="Shipping address" Description="Where we send your order.">
        <TextField @bind-Value="Model!.Street" AutoComplete="street-address" />
        <Row Gap="3">
            <TextField @bind-Value="Model!.City" AutoComplete="address-level2" Grow />
            <TextField @bind-Value="Model!.PostalCode" AutoComplete="postal-code" MaxWidth="9.Rem" />
        </Row>
    </Fieldset>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "fieldset-address")]
    private Order? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Order
    {
        [Required]
        public string? Street { get; set; } = "221B Baker Street";

        [Required]
        public string? City { get; set; } = "London";

        [Required, Display(Name = "Postal code"), StringLength(10)]
        public string? PostalCode { get; set; } = "NW1 6XE";
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="fieldset-columns" Grow>
    <TextField @bind-Value="Model!.Company" AutoComplete="organization" />
    <Fieldset Label="Billing address" Columns="3">
        <TextField @bind-Value="Model!.Street" AutoComplete="street-address" ColSpan="GridSpan.Full" />
        <TextField @bind-Value="Model!.City" AutoComplete="address-level2" />
        <TextField @bind-Value="Model!.Region" AutoComplete="address-level1" />
        <TextField @bind-Value="Model!.PostalCode" AutoComplete="postal-code" />
    </Fieldset>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "fieldset-columns")]
    private Billing? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Billing
    {
        public string? Company { get; set; } = "Acme Robotics";
        public string? Street { get; set; } = "500 Market Street";
        public string? City { get; set; } = "San Francisco";

        [Display(Name = "State or region")]
        public string? Region { get; set; } = "CA";

        [Display(Name = "Postal code")]
        public string? PostalCode { get; set; } = "94105";
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="fieldset-dividers" MaxWidth="32.Rem" Grow>
    <Fieldset Label="Privacy" Description="Who can see your profile and activity." Dividers Gap="3">
        <Switch @bind-Value="Model!.PublicProfile" ControlPosition="ControlPosition.End"
                Hint="Anyone with the link can see your name, photo and bio." />
        <Switch @bind-Value="Model!.ShowActivity" ControlPosition="ControlPosition.End"
                Hint="Your recent comments and reviews, on your profile." />
        <Switch @bind-Value="Model!.Searchable" ControlPosition="ControlPosition.End"
                Hint="Teammates can find you by email address." />
    </Fieldset>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "fieldset-dividers")]
    private Privacy? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Privacy
    {
        [Display(Name = "Public profile")]
        public bool PublicProfile { get; set; } = true;

        [Display(Name = "Show my activity")]
        public bool ShowActivity { get; set; }

        [Display(Name = "Findable by email")]
        public bool Searchable { get; set; } = true;
    }
}

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="fieldset-icons" MaxWidth="32.Rem" Grow>
    <Fieldset Label="Notifications" Description="What we email you about." Icon="Lucide.Bell" Dividers Gap="3">
        <Switch @bind-Value="Model!.Mentions" ControlPosition="ControlPosition.End" />
        <Switch @bind-Value="Model!.Digest" ControlPosition="ControlPosition.End" />
    </Fieldset>
    <Fieldset Label="Security" Description="How you sign in." Icon="Lucide.Shield" Dividers Gap="3">
        <Switch @bind-Value="Model!.TwoFactor" ControlPosition="ControlPosition.End" />
        <Switch @bind-Value="Model!.NewDevice" ControlPosition="ControlPosition.End" />
    </Fieldset>
</Form>

@code {
    [SupplyParameterFromForm(FormName = "fieldset-icons")]
    private Preferences? Model { get; set; }

    protected override void OnInitialized() => Model ??= new();

    public sealed class Preferences
    {
        [Display(Name = "Mentions and replies")]
        public bool Mentions { get; set; } = true;

        [Display(Name = "Weekly digest")]
        public bool Digest { get; set; }

        [Display(Name = "Two-step sign-in")]
        public bool TwoFactor { get; set; } = true;

        [Display(Name = "Email me about new devices")]
        public bool NewDevice { get; set; } = true;
    }
}