Components/Form components

EInput Input

import EUI 1.0

Examples

Password strength and rules

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInput { width: 320 text: "Eui2026!" showPassword: true showPasswordStrength: true }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Custom password rules

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EInput { width: 320 showPassword: true showPasswordStrength: true passwordRules: [{ "label": "Minimum 12 characters", "minLength": 12 }, { "label": "At least one digit", "pattern": /[0-9]/ }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Input

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 EInput { text: "$128" clearable: true prependComponent: Component { EText { padding: 8 text: "USD" } } parser: function(value) { return value.replace(/\\$/g, "") } formatter: function(value) { return value ? "$" + value : "" } appendComponent: Component { EText { padding: 8 text: qsTr("/ month") } } } EInput { clearable: true maximumLength: 40 showWordLimit: true suffixComponent: Component { EText { text: "QML" font.pixelSize: 12 } } prefixComponent: Component { EIcon { iconSize: 14 iconSource: EIcons.MAGNIFIER } } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Input

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 16 width: parent.width EInput { width: Math.min(parent.width, 520) placeholderText: qsTr("Enter a password") } EInput { clearable: true prefixIcon: EIcons.AT width: Math.min(parent.width, 520) placeholderText: qsTr("Small input") } EInput { text: "password" showPassword: true suffixIcon: EIcons.EYE width: Math.min(parent.width, 520) } }

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

accessibleNamestring

Name read by assistive technologies; provide a readable name for controls without text.

DefaultplaceholderText

appendComponentComponent

Component slot for custom input append area or list end; null uses the default content. See this page’s examples for delegate context.

Defaultnull

clearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CIRCLE_XMARK

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaultfalse

echoModeenum

Display mode for the input text.

TextInput.Normal
TextInput.Password
TextInput.NoEcho
TextInput.PasswordEchoOnEdit

DefaultDynamic binding

enabledbool

Allow interaction; false disables the control.

Defaulttrue

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

Defaultapplication font

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

maximumLengthint

Maximum allowed input characters.

Default32767

parservar

Input parser converting displayed text to the underlying value.

Defaultnull

passwordVisiblebool

Display the password as plain text.

Defaultfalse

placeholderTextstring

Placeholder shown when the value is empty.

Default""

prefixComponentComponent

Component slot for custom prefix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

prefixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

prependComponentComponent

Component slot for custom input prepend area; null uses the default content. See this page’s examples for delegate context.

Defaultnull

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaultfalse

showPasswordbool

Enable password entry and visibility switching.

Defaultfalse

showWordLimitbool

Show the current character count and length limit.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

styleTypeint

Semantic color style.

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

DefaultEStyle.Primary

suffixComponentComponent

Component slot for custom suffix; null uses the default content. See this page’s examples for delegate context.

Defaultnull

suffixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

textstring

Displayed text.

Default""

textColorcolor

Text color.

DefaultDynamic binding

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

wordCountintRead only

Current input character count.

DefaultComputed at runtime

showPasswordStrengthbool

Show strength and rule checks while a password input is focused.

Defaultfalse

passwordRulesvar

Password rules with label and minLength or pattern.

Default

Show default value

[ {label: ELocale.texts.PasswordLength, minLength: 8}, {label: ELocale.texts.PasswordUppercase, pattern: /[A-Z]/}, {label: ELocale.texts.PasswordLowercase, pattern: /[a-z]/}, {label: ELocale.texts.PasswordNumber, pattern: /[0-9]/}, {label: ELocale.texts.PasswordSymbol, pattern: /[^A-Za-z0-9]/} ]

passwordStrengthrealRead only

Fraction of passed password rules, from 0 to 1.

Default

Show default value

passwordRequirements.length ? passwordRequirements.filter(function(rule) { return rule.passed }).length / passwordRequirements.length : 0

passwordRequirementsvarRead only

Rule results with label and passed fields.

Default

Show default value

Array.isArray(passwordRules) ? passwordRules.map(function(rule) { let passed = false try { if (rule && rule.minLength !== undefined) passed = text.length >= Number(rule.minLength) else if (rule && rule.pattern) { const expression = new RegExp(rule.pattern) passed = expression.test(text) } } catch (error) { passed = false } return {label: rule && rule.label ? String(rule.label) : "", passed: passed} }) : []

Signals

SignaturePurpose

cleared()

Emitted after the contents are cleared with the clear action.

formatFailed(string message)

Emitted when input formatting fails; message explains why.