QML: CheckBox and RadioButton with description field

Restarting from this post explaining how to add the word wrap feature to the CheckBox and RadioButton controls here will propose to add a description field under the main control text. This will be useful to give a short explanation concerning the use of the control itself.

Full example code can be found here

In the example project you can find two ready made QML object to use in your project. The object basically add an additional property named description as follow:

DescriptionRadioButton {
 text: "This is the radio button"
 description: "This is the very very very very very very very very very very very very long description"
}
DescriptionCheckBox {
 text: "This is the check box"
 description: "This is the very very very very very very very very very very very very long description"
}

Objects code is quite simple. Basically it creame a custom control content item composed by two Labels. The first is the main thext and the second is the description field. The contro indicator is repositioned based to the main text size.

RadioButton {
    id: descriptionRadioButton
    width: parent.width
    indicator.y: topPadding + (textLabel.height / 2) - (descriptionRadioButton.indicator.height / 2)

    property string description

    contentItem: Column {
        readonly property int sideOffset: descriptionRadioButton.indicator.width + descriptionRadioButton.spacing
        spacing: 15

        Label {
            id: textLabel
            width: parent.width - leftPadding
            text: descriptionRadioButton.text
            font: descriptionRadioButton.font
            horizontalAlignment: Label.AlignLeft
            verticalAlignment: Label.AlignTop
            leftPadding: parent.sideOffset
            wrapMode: Label.Wrap
        }
        Label {
            id: descriptionLabel
            text: description
            color: "gray"
            visible: text.length > 0
            width: parent.width - leftPadding
            font: descriptionRadioButton.font
            horizontalAlignment: Label.AlignLeft
            verticalAlignment: Label.AlignTop
            leftPadding: parent.sideOffset
            wrapMode: Label.Wrap
        }
    }
}

CheckBox {
    id: descriptionCheckBox
    width: parent.width
    indicator.y: topPadding + (textLabel.height / 2) - (descriptionCheckBox.indicator.height / 2)

    property string description

    contentItem: Column {
        readonly property int sideOffset: descriptionCheckBox.indicator.width + descriptionCheckBox.spacing
        spacing: 15

        Label {
            id: textLabel
            width: parent.width - leftPadding
            text: descriptionCheckBox.text
            font: descriptionCheckBox.font
            horizontalAlignment: Label.AlignLeft
            verticalAlignment: Label.AlignTop
            leftPadding: parent.sideOffset
            wrapMode: Label.Wrap
        }
        Label {
            id: descriptionLabel
            text: description
            color: "gray"
            visible: text.length > 0
            width: parent.width - leftPadding
            font: descriptionCheckBox.font
            horizontalAlignment: Label.AlignLeft
            verticalAlignment: Label.AlignTop
            leftPadding: parent.sideOffset
            wrapMode: Label.Wrap
        }
    }
}