Selectors (Radio)

Radio buttons are used only one selection is allowed from a list of options.

Variants

Primary

Lorem ipsum dolor sit amet, Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur

Secondary

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi

Disabled

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a

Anatomy

Radio Buttons are made up of the following:

  1. Outer border
  2. Input

Size

Radio buttons are 18px by 18px nested in a frame that is 24px by 24px.

Text Style

Text that accompany a radio button as a label has a text size of 16px in Primary Grey. Use “Body (Default) text style on Figma.

Dos and Don'ts

doimage
Use radio buttons if there are only few options.
dontimg
Use other components like dropdown lists when providing multiple short options.