- Qt 5.3
- Qt Quick Controls
- QML Types
- ComboBox QML Type
- Qt 5.3.2 Reference Documentation

# ComboBox QML Type

Provides a drop-down list functionality. More...

Import Statement: | `import QtQuick.Controls 1.2`
Since: | Qt 5.1

- List of all members, including inherited members

## Properties

- acceptableInput : bool
- activeFocusOnPress : bool
- count : int
- currentIndex : int
- currentText : string
- editText : string
- editable : bool
- hovered : bool
- model : model
- pressed : bool
- style : Component
- textRole : string
- validator : Validator

## Signals

- accepted()
- activated(int index)

## Methods

- find(text)
- selectAll()
- textAt(index)

## Detailed Description

Add items to the ComboBox by assigning it a ListModel, or a list of strings to the model property.

    ComboBox {
        width: 200
        model: [ "Banana", "Apple", "Coconut" ]
    }

In this example we are demonstrating how to use a ListModel with a combo box.

    ComboBox {
        currentIndex: 2
        model: ListModel {
            id: cbItems
            ListElement { text: "Banana"; color: "Yellow" }
            ListElement { text: "Apple"; color: "Green" }
            ListElement { text: "Coconut"; color: "Brown" }
        }
        width: 200
        onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)
    }

You can make a combo box editable by setting the editable property. An editable combo box will autocomplete its text based on what is available in the model.

In the next example we demonstrate how you can append content to an editable combo box by reacting to the accepted signal. Note that you have to explicitly prevent duplicates.

     ComboBox {
         editable: true
         model: ListModel {
             id: model
             ListElement { text: "Banana"; color: "Yellow" }
             ListElement { text: "Apple"; color: "Green" }
             ListElement { text: "Coconut"; color: "Brown" }
         }
         onAccepted: {
             if (editableCombo.find(currentText) === -1) {
                 model.append({text: editText})
                 currentIndex = editableCombo.find(editText)
             }
         }
     }

You can create a custom appearance for a ComboBox by assigning a ComboBoxStyle.

## Property Documentation

read-onlyacceptableInput : bool

Returns `true` if the combo box contains acceptable text in the editable text field.

If a validator was set, this property will return `true` if the current text satisfies the validator or mask as a final string (not as an intermediate string).

This QML property was introduced in QtQuick.Controls 1.1.

See also validator and accepted.

activeFocusOnPress : bool

This property specifies whether the combobox should gain active focus when pressed. The default value is `false`.

read-onlycount : int

This property holds the number of items in the combo box.

This QML property was introduced in QtQuick.Controls 1.1.

currentIndex : int

The index of the currently selected item in the ComboBox.

Setting currentIndex to `-1` will reset the selection and clear the text label. If editable is `true`, you may also need to manually clear editText.

See also model.

read-onlycurrentText : string

The text of the currently selected item in the ComboBox.

Note: Since `currentText` depends on `currentIndex`, there's no way to ensure `currentText` will be up to date whenever a `onCurrentIndexChanged` handler is called.

editText : string

This property specifies text being manipulated by the user for an editable combo box.

This QML property was introduced in QtQuick.Controls 1.1.

editable : bool

This property holds whether the combo box can be edited by the user. The default value is `false`.

This QML property was introduced in QtQuick.Controls 1.1.

read-onlyhovered : bool

This property indicates whether the control is being hovered.

model : model

The model to populate the ComboBox from.

Changing the model after initialization will reset currentIndex to `0`.

read-onlypressed : bool

This property holds whether the button is being pressed.

style : Component

The style Component for this control.

See also Qt Quick Controls Styles QML Types.

textRole : string

The model role used for populating the ComboBox.

validator : Validator

Allows you to set a text validator for an editable ComboBox. When a validator is set, the text field will only accept input which leaves the text property in an intermediate state. The accepted signal will only be sent if the text is in an acceptable state when enter is pressed.

Currently supported validators are IntValidator, DoubleValidator, and RegExpValidator. An example of using validators is shown below, which allows input of integers between 11 and 31 into the text field:

Note: This property is only applied when editable is `true`

    import QtQuick 2.2
    import QtQuick.Controls 1.2

    ComboBox {
        editable: true
        model: 10
        validator: IntValidator {bottom: 0; top: 10;}
        focus: true
    }

This QML property was introduced in QtQuick.Controls 1.1.

See also acceptableInput, accepted, and editable.

## Signal Documentation

accepted()

This signal is emitted when the Return or Enter key is pressed on an editable combo box. If the confirmed string is not currently in the model, the currentIndex will be set to -1 and the currentText will be updated accordingly.

Note: If there is a validator set on the combobox, the signal will only be emitted if the input is in an acceptable state.

The corresponding handler is `onAccepted`.

This QML signal was introduced in QtQuick.Controls 1.1.

activated(int index)

index is the triggered model index or -1 if a new string is accepted

This signal is similar to currentIndex changed, but will only be emitted if the combo box index was changed by the user and not when set programatically.

The corresponding handler is `onActivated`.

This QML signal was introduced in QtQuick.Controls 1.1.

## Method Documentation

find( text)

Finds and returns the index of a given text If no match is found, `-1` is returned. The search is case sensitive.

This QML method was introduced in QtQuick.Controls 1.1.

selectAll()

Causes all editText to be selected.

This QML method was introduced in QtQuick.Controls 1.1.

textAt( index)

Returns the text for a given index. If an invalid index is provided, `null` is returned

This QML method was introduced in QtQuick.Controls 1.1.