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.
It's a best practice to use label with your
SfRadio component so users can understand what the input is for.
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.