ButtonGroup QML Type

Mutually-exclusive group of checkable buttons. More...

• List of all members, including inherited members

Properties

• buttons : list<AbstractButton>
• checkedButton : AbstractButton

Attached Properties

• group : ButtonGroup

Signals

• void clicked(AbstractButton button)

Methods

• void addButton(AbstractButton button)
• void removeButton(AbstractButton button)

Detailed Description

ButtonGroup is a non-visual, mutually exclusive group of buttons. It is used with controls such as RadioButton, where only one of the options can be selected at a time.

The most straight-forward way to use ButtonGroup is to assign a list of buttons. For example, the list of children of a positioner or a layout that manages a group of mutually exclusive buttons.

ButtonGroup {
    buttons: column.children
}

Column {
    id: column

    RadioButton {
        checked: true
        text: qsTr("DAB")
    }

    RadioButton {
        text: qsTr("FM")
    }

    RadioButton {
        text: qsTr("AM")
    }
}

Mutually exclusive buttons do not always share the same parent item, or the parent layout may sometimes contain items that should not be included in the button group. Such cases are best handled using the group attached property.

ButtonGroup { id: radioGroup }

Column {
    Label {
        text: qsTr("Radio:")
    }

    RadioButton {
        checked: true
        text: qsTr("DAB")
        ButtonGroup.group: radioGroup
    }

    RadioButton {
        text: qsTr("FM")
        ButtonGroup.group: radioGroup
    }

    RadioButton {
        text: qsTr("AM")
        ButtonGroup.group: radioGroup
    }
}

More advanced use cases can be handled using the addButton() and removeButton() methods.

See also RadioButton and Button Controls.

Property Documentation

ButtonGroup {
    buttons: column.children
}

Column {
    id: column

    RadioButton {
        checked: true
        text: qsTr("Option A")
    }

    RadioButton {
        text: qsTr("Option B")
    }
}

Attached Property Documentation

ButtonGroup { id: group }

RadioButton {
    checked: true
    text: qsTr("Option A")
    ButtonGroup.group: group
}

RadioButton {
    text: qsTr("Option B")
    ButtonGroup.group: group
}

Signal Documentation

ButtonGroup {
    buttons: column.children
    onClicked: console.log("clicked:", button.text)
}

Column {
    id: column
    Button { text: "First" }
    Button { text: "Second" }
    Button { text: "Third" }
}

Method Documentation