Right-Aligned Checkbox for React

For settings, where each row is an option people turn on or off and they scan the labels first. This demo puts FieldLabel before the checkbox, and the label grows so the box sits at the end of the row.

It depends on when the change applies. Use checkboxes when the settings are saved with a button. Use a Switch when each one takes effect immediately. The same row, label then control, works for both.

The label grows to fill whatever the box doesn't use, so every box sits at the end edge whatever the label's length, and they form one column. The list is capped at max-w-xs here; very long labels wrap inside their own space.

Yes. The stretched label is clickable, so tapping anywhere along the row's text toggles the box, not just the box itself. On touch screens, give rows more height (a larger gap-*, or padding on each Field) so neighbors are hard to hit by mistake.

Give each category its own FieldSet with a FieldLegend (Notifications, Privacy), and separate the sets with a FieldSeparator or more space. A legend also names the group for screen readers.

Yes. The label comes first in the source as well as on screen, so screen readers read the setting before the box's state, and Tab order matches what people see. The layout is only flexbox; each label stays linked to its checkbox.