previously Vue Storefront Build Better Storefronts

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.

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.

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.

Uncontrolled Group

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". 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" so that it is recognized as a radio button.

Playground