User has a list of multiple files. When user logs in for the first time, I want to show current file selected by default. Currently I am doing it using Radio Button like shown below:

enter image description here

But in UI it is not very clear that radio button shows current file. Is there any better way to visually show it except radio buttons?

  • 1
    How many files might a user have, typically? Might the list span multiple pages?
    – Matt Obee
    Apr 28, 2014 at 11:14
  • Is there a significance of using the radio buttons apart from representing the selection of a single file ?
    – roni
    Apr 28, 2014 at 11:55
  • There's no limit on the length of list. If content exceeds the page view, scroll bar appears.
    – Ayse
    Apr 28, 2014 at 11:58
  • @roni: Radio button is being used just to represent selection of single file. There is no other significance.
    – Ayse
    Apr 28, 2014 at 11:59
  • Then I'll agree with Franchesca, you can use any other visual queue instead of a radio button to indicate a selection.
    – roni
    Apr 28, 2014 at 12:02

3 Answers 3


A radio button is a control to allow the user to make a selection, but on it's own it does not have the visual weight to illustrate the "selected" state (especially for pre-selected items).

There are many ways to illustrate that an item has been (pre)selected, but it's hard to recommend one in particular without knowing your use case. You need to somehow give the selection more visual weight than the unselected items, so it is clear that it has a different state.

Here are a few off the top of my head:

  • "Favourite" type selections are normally represented with a star icon.
  • The selected item can be moved up to the top, or even shown in a different area / panel which contains only items that are selected.
  • If multiple selections are allowed, a "tick" icon can be used.
  • You could make the text of the file name bold.
  • You could make the background colour different to the rest of the grid (only use this in combination with another method of highlighting, as you should never rely on colour alone).

My thought is that the radio button list should show the selection (since that's what it's made for) and the visual cue that it's files being selected can be added.

enter image description here


You can use the Radio button artifact as affordance to represent that it's a list which permits single selection, meaning that a user can not have more than one application selected. But for visual feedback of what is currently selected you can make use of a whole lot more visual cues. Different background of the list item, bold font, coloring, indent (maybe not though, but you get the picture).

You don't have to stick to a radio button being the only visual feedback of selection, let that aspect instead cue the nature of the selection, with it being single selection. For item selection feedback you can use more visual cues, list item background probably being the one I would go with.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.