Components/Form componentsIntroduced in 1.3.0

EInputGroup Input group

import EUI 1.0

Examples

Input and action

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { Layout.fillWidth: true placeholderText: qsTr("Search") } EButton { text: qsTr("Search") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Select and input

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) ESelect { currentIndex: 0 Layout.minimumWidth: 120 Layout.preferredWidth: 120 model: ["https://", "http://"] } EInput { text: "example.com" Layout.fillWidth: true } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Icon addon

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EButton { enabled: false iconSource: EIcons.MAGNIFIER } EInput { Layout.fillWidth: true } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Multiple inputs

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { Layout.fillWidth: true placeholderText: "First" } EInput { Layout.fillWidth: true placeholderText: qsTr("Last") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Value and unit

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInputGroup { width: Math.min(480, parent.width) EInput { text: "100" Layout.fillWidth: true } EButton { text: "USD" enabled: false } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom spacing

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: Math.min(480, parent.width) Row { spacing: 12 EText { text: qsTr("Input spacing") anchors.verticalCenter: parent.verticalCenter } ESpinBox { id: gap to: 48 from: 0 value: 16 stepSize: 4 editable: true objectName: "inputGroupSpacingControl" } EText { text: "px" anchors.verticalCenter: parent.verticalCenter } } EInputGroup { spacing: gap.value width: parent.width objectName: "customSpacingInputGroup" EInput { Layout.fillWidth: true placeholderText: "First" } EInput { Layout.fillWidth: true placeholderText: qsTr("Last") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

contentalias

Content slot; declare QML child objects directly inside the component.

Defaultlayout.data

spacingreal

Spacing between adjacent input group members in pixels.

Default8