The Purple Shoes Manual 0.7.166

Radio

Radio buttons are a group of clickable circles. Click a circle and it'll be marked. Only one radio button can be marked at a time. (This is similar to the ListBox, where only one option can be selected at a time.)

So, how do you decide when to use radio buttons and when to use list boxes? Well, list boxes only show one highlighted item unless you click on the box and the drop-down appears. But radio buttons are all shown, regardless of which is marked.

 Shoes.app do
   para "Among these films, which do you prefer?\n"
   radio
   para strong("The Taste of Tea"), 
     " by Katsuhito Ishii\n", width: 580
   radio
   para strong("Kin-Dza-Dza"), 
     " by Georgi Danelia\n", width: 580
   radio
   para strong("Children of Heaven"), 
     " by Majid Majidi\n", width: 580
 end

Only one of these three radios can be checked at a time, since they are grouped together in the same slot (along with a bunch of para.)

If we move them each into their own slot, the example breaks.

 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio
       para "The Taste of Tea by Katsuhito Ishii", 
         width: 300
     end
     flow do
       radio
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end

This can be fixed, though. You can group together radios from different slots, you just have to give them all the same group name.

Here, let's group all these radios in the :films group.

Note: Purple Shoes doesn't support group.

 # Not yet available
 Shoes.app do
   stack do
     para "Among these films, which do you prefer?"
     flow do
       radio :films
       para "The Taste of Tea by Katsuhito Ishii",
         width: 300
     end
     flow do
       radio :films
       para "Kin-Dza-Dza by Georgi Danelia",
         width: 300
     end
     flow do
       radio :films
       para "Children of Heaven by Majid Majidi",
         width: 300
     end
   end
 end

For more methods beyond those listed below, also look into the Common methods page. Because you get those methods on every radio as well.

checked?() » true or false

Returns whether the radio button is checked or not. So, true means "yes, it is checked!"

Marks or unmarks the radio button. Using checked = false, for instance, clears the radio.

When the radio button is clicked, its click block is called. The block is handed self, which is an object representing the radio which was clicked.

Clicks are sent for both marking and unmarking the radio.

focus() » self

Moves focus to the radio. The radio will be highlighted.

Next: Shape