Login Id Text Box

3 minutes to read Download PDF Edit

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 a cascading style sheet (CSS) class for the widget. This class will be applied to the widget in the browser and the widget will get the corresponding styling. The class should be a class from the theme that is used in the project. It overrules the default styling of the widget.

Note that the styling is applied in the following order: 1) Default styling defined by the theme the project uses. 2) The 'Class' property of the widget. 3) The 'Style' property of the widget.

Style

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

`background-color:blue;` – this will result in a blue background.

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