RadioButton

A radio is an input control that allows a user to select one options from number of choices.

Variants

There are a total of 5 variants of radio button availabe in GEL.

Demo

Guidance

• Similar to checkboxes, radio buttons ideally should be stacked vertically, however can be horizontally placed if the width is sufficient.
• All radio should be followed by text in a from.
• One radio button should be selected by default using the checked attribute.
• Users are able to select an option by clicking/tapping either the radio button or its label.

When to use

• Use radio buttons to present a set of options, where only one option can be selected at a time.

When not to use

• If the options provided are more than 5, consider using a Select instead.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP