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

Switch

v2.1.1

Switches provide a binary on/off choice. Their input is immediate and requires no additional action.

Stylized artwork of two switches with labels.
Switchv2.1.1

On this page

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

Anatomy

Properties

Behavior

Platforms

Best practices

Specs

PreviousSelect list
Things.People.Love.
  • Get started
  • Foundations
  • Design system
  • Expressions
  • Resources
  • Articles
  • 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. Label
    2. Switch

    Label

    Switches should always have a label associated with them. The label should clearly indicate what is being activated.

    Selected

    Switches appear as either selected (on) or unselected (off). Switches cannot be in an indefinite state.

    Disabled

    Switches can be disabled in either a selected or unselected state if there is a prerequisite to altering its state.

    Immediate

    Switches immediately update the state of the application when their state changes. If a delay is necessary, a loading indicator should be used to inform the user that the process is taking longer.

    Labels

    Avoid using the words “on” or “off” within the label. Switches imply an on/off state so including it in the label is redundant.

    It is okay to use labels with verbs that clarify the decision if it isn’t a clear on/off decision, like “Show” or “Notify”.

    Platform-specific

    Native platforms use the operating system’s default visual treatment. The behavior and options remain the same across platforms.

    Labels

    Do use clear and concise labels.

    Avoid using action-related verbs with “on” or “off” when adding labels to controls. Switches imply an on/off state so including it in the label is redundant.

    Placement

    Do use switches as trailing elements.

    Don’t use switches as leading elements.

    Do ensure switches are either aligned with the grid or with each other when multiple switches are stacked.

    Don’t misalign switches by placing them immediately after labels when multiple switches are stacked, as this can affect legibility.

    Checkbox or switch

    If the action is part of a larger form, use a checkbox instead. The items will be submitted with the rest of the form details.

    Switches apply changes immediately and don’t require the user to submit anything. If you need to include the data in form content, use a checkbox set.

    Radio button or switch

    Switches are used for activation, not selection. If you are selecting between two available options, use a radio set instead.

    Switches should not be used to choose between opposing or discrete options. Instead, use switches for on/off situations.

    Switch diagram with 2 elements numbered: 1. Label, 2. Switch.
    An unselected switch with a label.
    An unselected switch sits above a selected switch.
    A disabled unselected switch sits above a disabled selected switch.
    A ‘Face ID sign in’ selected switch sits in the security section of the eBay app.
    3 switches with labels: ‘Auto-detect country’ with an unselected switch, ‘Show new layout’ with a selected switch, and ‘Notify me when I receive an offer’ with a selected switch.
    Web, Android, and iOS switches are shown with examples of their selected and unselected states.
    ‘Facial ID sign in’ selected switch
    ‘Turn on Facial ID sign in’ selected switch
    ‘Auto-detect’ selected switch with the switch to the right.
    ‘Auto-detect’ selected switch with the switch to the left.
    Three stacked switches with labels aligned to the left and switches aligned to the right.
    Three stacked switches with labels aligned ot the left and switches aligned right after each label, creating a staggered effect.
    Three checkboxes with distinct labels, one unselected and two selected, are stacked in a list.
    Three switches with distinct labels, one unselected and two selected, are stacked in a list.
    A ‘List view’ selected radio button sits above a ‘Grid view’ unselected radio button.
    An unselected switch with two labels, ‘List view’ on the left, and ‘Grid view’ on the right.
    A switch component is shown with specs highlighted. Space between the Label and Switch is 16px, and height of Switch is 24px.
    • Skin
    • Marko
    • React