SfRadio provides additional styles for different states of <input type="radio">. It can be used for choosing between a list of values when only one option can be selected at a time.
If you need to make this field required, it is crucial to communicate this intention clearly to your end users. You can find more information about required form fields in our guide here.
Examples
Basic Usage
Radio with leading control
It's a best practice to use label with your SfRadio component so users can understand what the input is for.
Radio with trailing control
With legend
Radio Group can have a legend tag, which represents a caption for the content of its parent fieldset tag.
Group Alignment
Radio components can be aligned inside RadioGroup in a column or in a row.
Accessibility notes
You can provide a bigger hit area for your radio buttons by making your label element another trigger for the radio button. This can be done by wrapping the input element in a label element.
When multiple radio elements are grouped together, one of their parent elements should have role="radiogroup" (opens new window). This will help indicate which radio inputs affect the same value.
If you have an element that is not an <input type="radio">, you should set the role="radio" (opens new window) so that it is recognized as a radio button.