Radio Button

components radio button radio-button form elements


The radio button is a well known form component used to set or unset only one choice for some user eligible options.


Our radio buttons should be accessible, so here you can see some stacked ones, browsable by using "Tab" & "Arrow" keys.

Selected radio button.

In addition to component text, an image property and/or a count property and/or an additional text can be set to append an additional multi-purpose texts. Image property is commonly used in payment to choose a payment method for example. Count property is commonly used in search filters to show how many results they will get by checking that option. Additional text is commonly used as a description.


c-radio-button is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that edition is not possible.

.is-disabled > c-radio-button

In some cases, the radio button is not disabled at component level but instead one ancestor is marked as disabled. This is mainly done when loading data to let the users know that the component is not useful at that moment.

c-radio-button is-unresolved

The unresolved state is used when text is not yet ready, and needs to be resolved asynchronously.

Validation states

c-radio-button has-success
c-radio-button has-warning
c-radio-button has-error