Components/Basic componentsIntroduced in 1.3.0

EFocusTrap Focus trap

import EUI 1.0

Examples

Focus loop

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("Focus here") } EButton { text: qsTr("Next") } EButton { text: qsTr("Last") } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Reverse focus loop

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 Column { spacing: 10 EText { text: "Shift+Tab: move backwards" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("Focus here") } EButton { text: "Previous" } EButton { text: qsTr("Last") } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Inactive trap

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 active: false Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("Focus here") } EButton { text: qsTr("Next") } EButton { text: qsTr("Last") } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Disabled region

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EFocusTrap { width: 420 height: 110 enabled: false Column { spacing: 10 EText { text: "Tab / Shift+Tab" } Row { spacing: 10 EInput { width: 180 placeholderText: qsTr("Focus here") } EButton { text: qsTr("Next") } EButton { text: qsTr("Last") } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Independent region

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 EFocusTrap { height: 50 width: 420 Row { spacing: 12 EInput { width: 180 placeholderText: "First region" } EButton { text: "First region action" } } } EFocusTrap { height: 50 width: 420 Row { spacing: 12 EInput { width: 180 placeholderText: "Second region" } EButton { text: "Second region action" } } } }

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.

Defaultbody.data

activebool

Keep Tab and Shift+Tab focus navigation within the region.

Defaulttrue

Methods

SignaturePurpose

focusNext(reverse)

Focus the next focusable control; use reverse for the previous control.