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.
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
Radio Group can have a
legend tag, which represents a caption for the content of its parent
Radio components can be aligned inside RadioGroup in a
column or in a
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
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.