Application Development : Selection Controls – RadioGroup

RadioGroup

A RadioGroup can be used to group a set of options together. However, only one option can be selected at a time. Options are displayed as radio buttons, with an optional text describing their purpose (see Figure 2).

Figure 2. RadioGroup

You can handle option selection by responding to the RadioGroup’s selectedOptionChanged signal (or alternatively, you could also directly handle the Option’s selectedChanged signal; see Listing 2).

Listing 2.  RadioGroup

// Create a RadioGroup with three options
Page {
    RadioGroup {
        Option {
            id: option1
            text: "Easy"
            onSelectedChanged: {
                if (selected) {
                    console.log("Easy selected");
                }
            }
        }
        Option {
            id: option2
            text: "Hard"
            selected: true
            onSelectedChanged: {
                if (selected) {
                    console.log("Hard selected");
                }
            }
        }
        Option {
            id: option3
            text: "Very Hard"
            onSelectedChanged: {
                if (selected) {
                    console.log("Very hard selected");
                }
            }
        }
    }
}

Use a RadioButton when users can choose between more than two mutually exclusive options.