Truncating labels on a radio button swatch



  • I have an ecommerce project wherein there's a limitation on the displayed text inside the radio button for swatches. This is a requirement of our business analyst and said that it was good but there would be an issue on the mobile experience. Would like to ask for a help if what are the other work arounds for this design. enter image description here



  • Try a dropdown.

    This way you avoid the mobile use case problems, as it's another means of allowing only one item to be in a selected state but can fit in a mobile situation.

    • Select... shows the user that nothing has been chosen yet
    • You don't have to truncate
    • You can use a checkmark to emphasize the selection inside the menu
    • It scales if you add more choices
    • No need to rely on tooltips

    enter image description here

    Update: If you must use selectable buttons, you can stack them if space is an issue.

    If you have no choice but to use the buttons, you could allow them to stack into multiple lines. If space is limited, you can have them flow to the fewest vertical rows, as the example below.

    • This is not an elegant solution, but it keeps the whole label visible

    enter image description here

    • If you have more vertical space, you could stack them into 4 rows, but keep the full width, so the longest title determines the width:

    enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2