Vertical List Checkbox for React

Change the gap-3 on the FieldGroup: gap-2 for a dense list, gap-4 or more for a relaxed form. The gap sits between the fields, so the first and last rows have no extra space.

A languages list maps to one horizontal Field per entry: JavaScript, TypeScript, Python, Java and C#. Each checkbox's name is the language id, so the checked ones are what the form submits. The checkbox's id is the language id too, and the label's htmlFor points at it.

No. None of them is given a checked value, so each box keeps its own state and the form reads them on submit. Hold the selected ids in state when something else on the page has to react to the choice.

Yes: one option per line is the layout that needs no adjusting on a narrow screen. Each label is clickable, so the whole row text is a tap target; raise the gap if rows sit too close for fingers.

Put a parent checkbox above the list whose state is derived from the children: checked when all are, indeterminate when some are. The nested list shows the pattern.

Yes. Each checkbox has its own label, Tab moves down the list and Space toggles. To name the group, wrap it in a FieldSet with a FieldLegend such as "Programming languages": screen readers announce it on entering the group.