← All demos

Disabled cascade — fieldset & form

A native <fieldset disabled> disables every descendant form control — including form-associated custom elements — through the formDisabledCallback(disabled) lifecycle hook the browser invokes. FieldAssociationController now implements that hook, so the cascade reaches the inner control and excludes the field from FormData. The two groups below wire the same field components; only the container differs.

1. Native <fieldset>

enabled

The browser calls formDisabledCallback(true) on each form-associated descendant automatically. No custom wiring on the container — this works purely because the controller now implements the hook.

Shipping details
Full name Country
  • United Kingdom
  • United States
  • Japan
    •  This is a gift

    Native <input> — disabled by the same cascade.

    2. Custom <my-fieldset>

    enabled

    A custom container gets no automatic cascade for its slotted fields. <my-fieldset> replicates it by invoking the same formDisabledCallback() hook the browser would — the fields route it through FieldAssociationController identically. The <legend> names the group structurally (accessible-name algorithm), independent of the field-labelling machinery.

    Billing details Full name Country
  • United Kingdom
  • United States
  • Japan
    •  Paperless billing

    FormData on last submit

    Entries

    No submission yet — toggle a group disabled, then Submit to see which fields drop out of FormData.