In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Radio button

Radio button enables users to select one option at a time.

General guidelines

Use the radio button to offer the choice of only one option in the list. Radio buttons in the same group are dependent upon each other. Activating one, deactivates the others.

Radio buttons are mainly used in forms, filter panels, modals and in tables.

 

Radiobutton01

Best practices

Radiobutton02DO

Use the radio button to offer the choice of only one option in the list.

Radiobutton02CAUTION

Never compel the user to choose an option he does not want.

Radiobutton02CAUTIONs

Prefer the toggle if there is only one option, or an on/off mode of the same value.

Radiobutton03DO

Use a radio button for choices that are frequent and low in number (from 2 to 4 options). Before any user action, all radio buttons should be unselected.

Radiobutton03DONT

Avoid setting a default option. You may do it if in specific context of use (e.g. when you already know the answer or can predict it). Know that you will influence their choice.

Visual guidelines

Behaviours

Selection controls have 8 states: Unselected, selected, hover unselected, hover selected, focus unselected, focus selected, disable unselected and disable selected.

Radiobutton02
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top