Required and Optional Fields Form Block for React Aria

REQUIRED and OPTIONAL list the field names in each band and problemsOf holds the rule for each one, so moving a field between bands is a change to those two lists, the band it renders in, and its optional prop, which prints the "(optional)" label. Required rules run first and always, optional rules only when something was typed.

It is a disclosure button with aria-expanded and aria-controls over a region whose height animates from zero. While it is closed the region is hidden and inert, so Tab skips its fields, and the values stay in state, so closing it loses nothing. Reduced motion turns the animation off.

Only the phone number is checked, and only when it is not empty. If it is wrong while the band is folded, Add vendor opens the band and puts focus on that field, so an error is never hidden behind a closed section. An untouched optional field never blocks the form.

Every field has a visible label tied by for, and its hint or problem sits in a line that is always reserved and tied by aria-describedby, so nothing shifts when an error appears. Fields in error carry aria-invalid. The foot status line is the one polite region and says how many required fields are filled, or how many to fix.

Add vendor says the vendor was added in this demo and sends nothing. To make it real, post the values from the submit handler once problemsOf returns nothing, and show your server's field errors in the same slots by setting them from the response.