Radio Button

Approved — Ready for dev

The radio button is a single-select UI control. A radio button may be either Large or Small. Radio buttons should only ever be used when the user needs to select one of a number of options. Never use a radio button when only one selection is available.

Radio Button

Anatomy

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

Specs

Color

Element Property Value
Label Text color ∆colorPlatformGray900
Radio input (static/off) Background color ∆colorPlatformWhite
Radio input (static/off) Border color ∆colorPlatformGray600
Radio input (selected/on) Background color ∆colorPlatformWhite
Radio input (selected/on) Border color ∆colorBrandedAffordanceAccessible
Radio input, label, and slot (disabled) Alpha ∆colorPlatformAlpha400

Elevation

No elevation considerations needed for this component.

Spacing

States

Theming

No additional theming considerations are needed for this component.


Placement

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.

Behavior

Selection

When a user selects an item in a radio button group, the selection state should animate quickly, offering feedback to the user’s action.

Interaction Steps Duration Easing Notes Haptics
Selection Selection border grows into frame ∆motionTimeExtraFast ∆motionTimingFunctionStandard Input border scales per design. Light on trigger (Flutter: light)

Deselection

When a user selects an item in a radio button group while one is already selected, the previously selected radio button should animate away quickly, creating a sense of continuity between the change of selection.

Interaction Steps Duration Easing Notes Haptics
Deselection Selection border shrinks out of view ∆motionTimeExtraFast ∆motionTimingFunctionStandard Input border scales per design.  

Developer Docs

Vue Developer Docs

Component documentation coming soon!