This is my attempt at learning REACT. There are many bugs in these components and they MUST not be copied for use in production.
Working example on Netify:
- Import the necessary React components from the React library.
- Create a RadioGroup component as a class component or functional component.
- Use the fieldset and legend HTML elements to group the radio buttons and label the group with "My favourite animal".
- Create the radio buttons for each of the options: Cat, Dog, and Horse, using the input HTML element with the type attribute set to "radio".
- Set the aria-describedby attribute on the first radio button with an empty value.
- Create a submit button and a reset button after the radio buttons.
- Implement logic to handle the form submission, including displaying an error message "Please make a selection" if none of the radio buttons are selected.
- On error, set the keyboard focus to the first radio button in the group using the ref attribute and the focus method.
- Update the value of aria-describedby with the error ID on error, and clear the error and reset aria-describedby to an empty value when a radio button is 10. selected or the reset button is clicked.
- Style the radio buttons using CSS Variables in a separate CSS file.
- Render the RadioGroup component in the root element of the HTML document.
- Wrap the rendered component in a StrictMode component from the React library.