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.
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.