Solaris Design System

Radio

Radio buttons are used for single select items from a variety of options.

States Emotive
Type: body-emotive
Radio: 24px
Margin right: 16px
Check: 16px 		Productive
Type: body-productive
Radio: 16px
Margin-right 8px
Check: 8px
:enabled Enabled radio emotive theme light Enabled radio emotive theme dark Enabled radio productive theme light Enabled radio productive theme dark
:hover Hover radio emotive theme light Hover radio emotive theme dark Hover radio productive theme light Hover radio productive theme dark
:focus Focus radio emotive theme light Focus radio emotive theme dark Focus radio productive theme light Focus radio productive theme dark
:selected Selected radio emotive theme light Selected radio emotive theme dark Selected radio productive theme light Selected radio productive theme dark
:hover-selected Hover selected radio emotive theme light Hover selected radio emotive theme dark Hover selected radio productive theme light Hover selected radio productive theme dark
:focus-selected Focus selected radio emotive theme light Focus selected radio emotive theme dark Focus selected radio productive theme light Focus selected radio productive theme dark
:disabled-selected Disabled selected radio emotive theme light Disabled selected radio emotive theme dark Disabled selected radio productive theme light Disabled selected radio productive theme dark
:disabled-enabled Disabled enabled radio emotive theme light Disabled enabled radio emotive theme dark Disabled enabled radio productive theme light Disabled enabled radio productive theme dark
:skeleton Skeleton radio emotive theme light Skeleton radio emotive theme dark Skeleton radio productive theme light Skeleton radio productive theme dark
:readonly-selected ReadOnly selected radio emotive theme light ReadOnly selected radio emotive theme dark ReadOnly selected radio productive theme light ReadOnly selected radio productive theme dark
:readonly ReadOnly radio emotive theme light ReadOnly radio emotive theme dark ReadOnly radio productive theme light ReadOnly radio productive theme dark

Radio groups

Positions Emotive
Type: body-emotive
Radio: 24px
Margin right: 16px
Check: 16px 		Productive
Type: body-productive
Radio: 16px
Margin-right 8px
Check: 8px
Margin-bottom: 16px Group radio emotive theme light Group radio emotive theme dark Group radio productive theme light Group radio productive theme dark

Usage

Radio buttons are when you have a group of exclusive choices and the user is only allowed to select one item from the group.

Unlike checkboxes, radio buttons allow only one selection from the group of selections.

Radio buttons can be standalone or in a group. If used in a group, a group label is required. Radio groups are also stacked vertically.