Persisted Choice

The component is self-contained: one file, no dependencies, its own palette in the --vibeui-buttongroup-057-* variables. It is a client component: useState holds the selected value. Buttons with aria-pressed submit nothing on their own, so an input[type=hidden] with the same value lies inside the group — a form collects it through FormData exactly like an ordinary field, and the server does not have to know anything about the buttons. The value is duplicated on the root by the data-value attribute: it is visible in the inspector and tests and styles can be written against it without looking into React state. The line under the group shows the pair that will travel to the server — that is a way to catch a drift between the look and the data. The track is a role="toolbar" with a roving tabindex: Tab stops on the group once, and the value is switched with the arrows.