Mendix 7 is no longer supported unless you have Extended Support (for details, please contact Mendix Support). Mendix 7 documentation will remain available for customers with Extended Support until July, 2024.

Login Id Text Box

Last modified: June 29, 2022

The login id text box is a widget that can be used to provide a login id for authentication. A login id is a unique identifier used to identify a user. Examples are a username or email address.

It must be placed on a page together with a login id text box and a sign-in button.

Common Properties

Name

The internal name of the widget. You can use this to give sensible names to widgets. The name property also appears in the generated HTML: the widget DOM element automatically includes the class mx-name-{NAME}, which can be useful for Selenium testing.

Class

The class property allows you to specify one or more cascading style sheet (CSS) classes for the widget. The classes should be separated by a space. The classes will be applied to the widget in the browser and the widget will get the corresponding styling. The classes should be classes in the theme that is used in the project. It overrules the default styling of the widget.

Styling is applied in the following order:

  1. the default styling defined by the theme the project uses
  2. the Class property of the widget
  3. the Style property of the widget.

You can see which widgets in a page have styling applied via the class or style property by clicking the Show styles button.

Location and effect of the Show styles button

Style

The style property allows you to specify additional CSS styling. If a class is also specified, this styling is applied after the class.

For example:

background-color:lightblue; color:red;

will result in red text on a blue background.

You can see which widgets in a page have styling applied via the style or class property by clicking the Show styles button.

Tab index

The tab index influences the order in which the end user navigates through the page using the tab key. By default tab indices are zero and the tab order is determined automatically by the client system. A value of minus one (-1) means that the widget will be skipped when tabbing through the page.

Default value: 0

General Properties

Placeholder

The placeholder text is shown when no text has been entered yet. It can be used to give a hint to the user about what kind of text should be entered.

Label Properties

A label can be used to described the purpose of the widget to the user. The label is shown next to the widget in the user interface. If a label is configured, the widget will be rendered in the browser, wrapped in a form group. See Bootstrap documentation.

Show Label

This property determines whether the label is rendered and the widget is wrapped in a form group.

Default value: Yes

Label Caption

This property is shown only when Show Label is Yes. It determines what text is rendered within a label.

Form Orientation

This property is shown only when Show Label is Yes. It determines whether the label is rendered on the same line as the input (Horizontal) or above it (Vertical).

Default value: Horizontal

Label Width (Weight)

This property is shown only when Show Label is Yes. If the form orientation is set to horizontal this property can be used to specify the width of the label. The width is specified using column weights from the Bootstrap grid system (see Layout Grid).

Default value: 3