Radio Option

The Radio Option provides the user with clear option to chose from in a short list. They are primarily used in forms. Only one RadioOption can be chosen at a time.

 

Variants

Row

The default appearance for radio options.

Row & Graphic

Used when a graphic is available to display within the option.

Icons and graphics help the user identify the option quicker.

Column

Used only for mobile devices.

Can be placed into two columns so options appear side by side.

Increased area to tap easily on smaller screens.

 

 

Anatomy

 

Radio Option (Row)

1. Radio 16x16px
2. Left align 16px IBM Plex Sans Regular
3. Padding 12px
4. Space 12px
5. 480px width

 

 

Radio Option (Row & Graphic)

1. Radio 16x16px
2. Icon 32x32px
3. Left align 16px IBM Plex Sans Regular
4. 8px, 12px, 8px, 12px padding
5. Space 12px
6. Space 12px
7. 480px width

 

 

Radio Option (Column)

1. 24px, 12px, 24px, 12px padding
2. Icon 32x32px
3. Space 8px
4. Centre align 16px IBM Plex Sans Regular
5. Space 8px
6. Radio 16x16px
7. 171px width

 

 

States