Radio Button

Radio buttons are made of the radio input with a label or slot option.

Label

The checkbox input with the label next to it is the default. 

1. Radio input
2. Label - Body 1 or Caption

Slot

The radio input with a slot next to it lets the input be attached to anything. This may be a paragraph or image. This is determined by the design.

1. Radio input
2. Slot (optional)

Size

Radio buttons may either be Large or Small depending on the use case. The Large variant utilizes our Body 1 type style, so it is preferable in most use cases. The Small version may be used when the Caption type style and smaller imprint is preferable. 

1. Radio input
2. Label - Body 1

1. Radio input
2. Label - Caption 

Container

For mobile, it makes sense to have a bigger hit space for the radio button. The radio button will be housed in a container to give it more of a native look but also allow the user to be able to select easier.

1. Container
2. Radio Button - Label or Slot Variant

Radio buttons should always be placed in a radio button group, directly beneath the heading or content that describes the context and implications of the selection. Radio button groups should typically be placed 24px below meta content, left-aligned to the edge of the parent container. Radio button groups should always contain two or more options—never use a radio button when only one selection is available.