Skip to main contenteBay Playbook

Radio button

v2.2

Radio buttons allow the user to select one option from a set.

  • CSS
  • Marko
  • React
Stylized artwork of radio buttons on a list.

Anatomy

Radio button diagram with 2 elements numbered: 1. Radio input, 2. Label.
  1. Radio input
  2. Label

Properties

Label

Required. The label names a single selectable option. Each option in a group should be distinct and parallel so users can quickly scan and compare.

  • Use sentence case
  • No ending punctuation
  • Use a noun or noun phrase
  • Aim for 1–5 words
A Label to the right of a radio checkbox.

Size

There are two sizes available. Large is the default and is preferred on smaller screens. The smaller radio button can be used for dense layouts, but are less tap-friendly.

A small radio button sits above a large radio button.

Selection

A radio button can be either selected or unselected. There are no indeterminate states for radio buttons.

An unselected radio button sits above a selected radio button.

Disabled

A radio button can be disabled if there is a prerequisite to activate.

A small disabled radio button sits above a large disabled radio button.

Behavior

Label overflow

Labels will wrap if they are wider than the parent container. The radio button remains aligned to the top of the text box.

A small radio button with label overflow spanning two lines sits above a large radio button with label overflow spanning two lines.

Group labels

Radio buttons are contained within a set of at least two items. The group label names the category or decision the user is making to give context for the options beneath it. If users need more context before selecting, use a short introductory paragraph above the group instead of trying to fit it in the label.

  • Use sentence case
  • No ending punctuation, unless it's a question
  • Keep to 1–5 words
‘Choose a payment method’ section groups two radio buttons: Credit card and Paypal. The Credit card radio button is unselected, while the Paypal button is selected.

Platforms

Android

Android uses the native Material radio buttons for improved support and accessibility.

A ‘How should we contact you section’ on eBay mobile Android shows two radio buttons in native Material design format.

iOS

iOS devices use the large Evo radio button.

A ‘How should we contact you section’ on eBay mobile iOS shows two radio buttons in large eBay Evo design format.

Web

Web uses the large and small Evo radio buttons depending on screen size and content density.

Two small radio buttons are group in an ‘Interested buyers’ section on a larger eBay screen.

Best practices

Selection

Radio buttons should only be used when a single element can be selected.

A ‘Choose app theme’ section with three large radio buttons: Light, Dark, and System settings. The System settings radio button is selected, while the Light and Dark radio buttons are unselected.

Don’t use radio buttons when multiple options can be applied simultaneously.

A ‘Choose a color’ section with three large radio buttons: Yellow, Orange, and Black. The Orange and Black radio buttons are selected, while Yellow radio button is unselected.

Specs

Small and large radio button specs are shown. Small radio button specs: the height of the radio checkbox is 18px, the space between the radio checkbox and label is 12px. Large radio button specs: the height of the radio checkbox is 24px, the space between the radio checkbox and label is 16px.