QML: CheckBox and RadioButton with word wrap feature

Standard QML CheckBox and RadioButton controls can be used in a very easy way but, at least until the current date, it have the problem if the text go over the parent control container is not automatically moved to the next line but is simply cutted out. This missing feature is called word wrap.

Fortunately this feature can be easily added by using a bit of additional code. The two examples below are standard code working in the "wrong" way by cutting out the long text:

CheckBox {
    id: myCheckBox
    text: qsTr("This is a very very very very very very very long text")
}

RadioButton {
    id: myRadioButton
    text: qsTr("This is a very very very very very very very long text")
}

To add the required word wrap we just have to customize contentItem of the control by using a Label control for the text, this because this control have the word wrap option as follow (in red the additional code):

CheckBox {
    id: myCheckBox
    width: parent.width
    text: qsTr("This is a very very very very very very very long text")
    contentItem: Label {
        text: myCheckBox.text
        font: myCheckBox.font
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        leftPadding: myCheckBox.indicator.width + myCheckBox.spacing
        wrapMode: Label.Wrap
    }
}

RadioButton {
    id: myRadioButton
    width: parent.width
    text: qsTr("This is a very very very very very very very long text")
    contentItem: Label {
        text: myRadioButton.text
        font: myRadioButton.font
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        leftPadding: myRadioButton.indicator.width + myRadioButton.spacing
        wrapMode: Label.Wrap
    }
}

That's all, very simply as quite everything using great QML!