Radio Group in Form for React

One of the three options. On submit the handler looks the value up in the options list. With no match it sets the field invalid, and FieldError shows You need to select a notification type.

The group is controlled, and picking an option stores it and clears the error. It also has name set to type, so a real form submit sends the value. value is the state, and onValueChange receives the next string.

all is All new messages, mentions is Direct messages and mentions, and none is Nothing. They come from a list at the top of the file.

The outer Field and each option's Field get invalid, so the legend and the radios turn the destructive color, and FieldError appears under the description.

The handler prevents the page reload and shows You selected: with the option's label next to the button. Replace that line with your own save or request.

Yes. Tab moves focus to the first item, since none is checked. The arrow keys move to another item and check it, Space checks the focused item, and Enter on the button submits.