Skip to main contenteBay Playbook
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles

Design system

  • Overview
    • Overview
    • Color
    • Dimension
    • Spacing
    • Typography
    • Breakpoints
    • Shadow
    • Shape
    • Opacity
    • Motion
    • Overview
    • Status
    • Accordion
    • Action bar
      • Overview
      • Inline notice
      • Page notice
      • Section notice
    • Avatar
    • Badge
    • Banner
    • Breadcrumb
      • Overview
      • Branded button
      • CTA button
      • Icon button
      • Link button
    • Carousel
    • CCD
      • Graphs
      • Metrics
    • Date picker
    • Dialog
    • Divider
    • Education notice
    • EEK rating and range
    • Expansion
      • Checkbox
      • Chip
      • Combobox
      • Dropdown
      • Numeric stepper
      • Password
      • Phone number
      • Radio button
      • Search field
      • Select list
      • Switch
      • Text area
      • Text field
    • Item tile
    • List row
      • Overview
      • Expressive loader
      • Skeleton loader
    • Media container
    • Pagination
    • Popover
    • Progress stepper
    • Quick filter
    • Section header
    • Segmented button
      • Bottom sheet
      • Panel
    • Signal
    • Snackbar
    • Tab
    • Table
      • Tooltip
      • Tourtip
    • Toggle button group
    • Video player
    • Overview
    • Bulk editing
    • File uploading
      • Text link

Radio button

v2.0.1

Radio buttons allow the user to select one option from a set. Only one can be selected at a time.

Stylized artwork of radio buttons on a list.
Radio buttonv2.0.1

On this page

  • Anatomy
  • Properties
  • Behavior
  • Platforms
  • Best practices
  • Specs

Anatomy

Properties

Behavior

Platforms

Best practices

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.
PreviousPhone number
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • Contributors
  • Careers
  • Press
  • Privacy policy
© 2025 eBay. All rights reserved.

eBay Evo, the eBay trademark, and the eBay logo are the intellectual property of eBay Inc.

    1. Radio input
    2. Label

    Label

    A label is required for all radio buttons. They should be as short as possible.

    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.

    Selection

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

    Disabled

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

    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.

    Group labels

    Radio buttons cannot be standalone. They should always be contained within a set of at least two items. The group title is required to clarify how the options are related and what decision is being made.

    Android

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

    iOS

    iOS devices use the large Evo radio button.

    Web

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

    Selection

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

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

    Radio button diagram with 2 elements numbered: 1. Radio input, 2. Label.
    A Label to the right of a radio checkbox.
    A small radio button sits above a large radio button.
    An unselected radio button sits above a selected radio button.
    A small disabled radio button sits above a large disabled radio button.
    A small radio button with label overflow spanning two lines sits above a large radio button with label overflow spanning two lines.
    ‘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.
    A ‘How should we contact you section’ on eBay mobile Android shows two radio buttons in native Material design format.
    A ‘How should we contact you section’ on eBay mobile iOS shows two radio buttons in large eBay Evo design format.
    Two small radio buttons are group in an ‘Interested buyers’ section on a larger eBay screen.
    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.
    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.
    • Skin
    • Marko
    • React