Vue

Radio

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.

Playground