User Fields Settings Block for React

A pure function, checkValue, takes the field's saved-so-far rule and what you typed. It checks an empty value first (Required or Empty is fine), then the preset (an email needs an @ and a domain, a URL starts with https://, digits are digits), then the length, and returns the first reason it fails or Valid. The Start date field reads a year-month-day value and refuses a day after the fixed as-of day. The same function should run on your server when a member saves, since a check in the browser is a courtesy.

So the table never changes height: opening another row closes the first, and every row's rules take the same space. It follows the accordion pattern that doesn't allow collapsing, so the open row's Rules button is marked disabled but stays in the tab order, and pressing it says the rules stay open in the status line. Each button is named for its field ("Rules for Phone") and tells a screen reader whether it is expanded.

A drawing of what a new member fills in, made from the same list: each label, a star when the field is required or "(optional)" when it isn't, a drawn box with the glyph of its type, and a line saying who sees the answer. It changes as you flip a switch or pick an audience, before anything is saved. The boxes are decorative; the labels and the audience lines are text.

Everything. Save keeps the edited fields as the saved ones, in this page only, and says how many changes it kept; Discard puts the saved ones back. To make it real, send each field's id, whether it is required, who can see it, its preset and its two lengths to your API in the save handler, and enforce the same rules there. Save and Discard stay in place and focusable while nothing changed and answer "No changes to save." in words. The rules and the tester live in SAVED and checkValue.

It is a native table with a caption, column headers, and the field as each row's header; each switch and menu is named for its field ("Required: Job title"). The spoken verdict on a typed value comes once typing pauses, in the one polite status line, never on load. Below the medium breakpoint each row becomes a card with the same controls, each labelled, and the rules open under their card; the save bar stays pinned to the bottom of the screen.