# SearchField

```
import QtQuick 2.15
import QtQuick.Controls 2.15
import org.mauikit.controls 1.3 as Maui

Maui.ApplicationWindow
{
    id: root

    property string query

    Maui.Page {
        anchors.fill: parent

        showCSDControls: true

        headBar.middleContent: Maui.SearchField
        {
            anchors.horizontalCenter: parent.horizontalCenter
            placeholderText: "Search for..."
            onAccepted: {
                query = text
            }
        }

        Label {
            id: label
            anchors.centerIn: parent
            text: query
        }
    }
}

```

```
// Opcionalmente

onAccepted: {
    label.text = text
}

Label {
    id: label
    anchors.centerIn: parent
}
```

<figure><img src="https://3899745996-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FED1v8xhNFPWKlgOCuryr%2Fuploads%2FR4VFnLJYmp7V8sFcQQ9i%2FControls-SearchField.jpg?alt=media&#x26;token=25e0a0bf-7e38-4643-8478-eee270414f3a" alt=""><figcaption></figcaption></figure>

## Propiedades

{% embed url="<https://api.kde.org/mauikit/mauikit/html/classSearchField.html>" %}

{% embed url="<https://doc.qt.io/qt-5/qml-qtquick-controls-textfield.html>" %}