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.