Documentation:Input Controls

Input Controls

This page was created by Stephanie on 2023-05-25. Last edited by Wikiadmin on 2026-07-29.

You can configure generated input controls in a MDriven Designer ViewModel to give users persistent guidance, empty-field prompts, browser-appropriate text input types, and icons; this page is for developers designing MDriven Turnkey views.

Configure an input column

Input controls are rendered according to the value type of the ViewModel column. For a text input, you can add guidance and presentation metadata in the ViewModel Editor.

For example, if a ViewModel has a column named EmailAddress, you can configure its input as an email field, show an example while it is empty, show a persistent instruction below it, and add an icon.

Open the ViewModel in the ViewModel Editor.
Select the input column that users will edit. In this example, select EmailAddress.
Add the companion columns or tagged values described in the following sections.
Run the view and check the generated control in the browser.

Helper text

Helper text is persistent guidance displayed below an input control. Use it to explain how the value will be used or what the user must enter.

Helper text occupies one line below the input control and remains visible.

Add helper text

To add helper text for a ViewModel column, create another column named:

<ViewModelColumn>_HelperText

Replace <ViewModelColumn> with the name of the input column.

Input column	Helper-text column	Example helper text
`EmailAddress`	`EmailAddress_HelperText`	`We use this address for order updates.`
`RegistrationNumber`	`RegistrationNumber_HelperText`	`Enter the registration shown on the vehicle.`

Placeholder text

A placeholder is text shown inside an input control only while the control has no value. Use it to provide an example of the expected format or value.

A placeholder is not persistent guidance: it disappears when the user enters a value. Use helper text when the instruction must remain visible.

Add a placeholder

To add a placeholder for a ViewModel column, create another column named:

<ViewModelColumn>_Placeholder

Input column	Placeholder column	Example placeholder
`EmailAddress`	`EmailAddress_Placeholder`	`name@example.com`
`PhoneNumber`	`PhoneNumber_Placeholder`	`+46 70 123 45 67`

For EmailAddress, you can use both companion columns:

EmailAddress_Placeholder contains name@example.com while the field is empty.
EmailAddress_HelperText contains We use this address for order updates. below the field.

Set the text input type

For columns intended for text input, set the Texttype tagged value on the ViewModel column to request another HTML input type. The browser determines how each type is rendered.

`Texttype` value	Intended input	Example use
`Password`	Password input	A column named `Password` where entered characters should not be displayed as normal text.
`Email`	Email input	`EmailAddress` with the placeholder `name@example.com`.
`Tel`	Telephone input	`PhoneNumber` with an example international phone number.
`URL`	URL input	`Website` with the placeholder `https://example.com`.
`Search`	Search input	`SearchTerm` for entering a query.

For the column EmailAddress, set its Texttype tagged value to Email.

See Documentation:Column.Texttype for the attribute and HTML input type behavior for browser-level input-type reference.

Add an icon

You can add an icon to a generated input control as a visual indicator of its purpose.

Set the icon name

Set the Icon tagged value on the ViewModel column. Its value is the icon name. MDriven Turnkey uses Material Icons names.

For example, set Icon on EmailAddress to the Material Icon name you want displayed for an email field.

Choose the icon position

An icon is placed at the start of the input by default. To place it after the input, set the IconPosition tagged value to after.

Tagged value	Value	Result
`Icon`	A Material Icon name	Adds that icon to the input control.
`IconPosition`	Not set	Places the icon at the start of the input.
`IconPosition`	`after`	Places the icon after the input.

Complete example

To configure an email input with a prompt, persistent explanation, and trailing icon:

In the ViewModel Editor, select EmailAddress.
Set tagged value Texttype to Email.
Set tagged value Icon to the required Material Icon name.
Set tagged value IconPosition to after.
Create EmailAddress_Placeholder and set its value to name@example.com.
Create EmailAddress_HelperText and set its value to We use this address for order updates..
Run the view. Before the user enters a value, the field shows name@example.com; the helper text remains visible below the field.

Style an input control

Use Documentation:CSS BEM to target generated Turnkey control blocks and their elements in CSS. A text field is represented by a tk-text-field block, and its native HTML input is the tk-text-field__native element.

For example, a CSS rule targeting the native input of text fields is:

.tk-text-field__native {
  /* Add your input-specific styling here. */
}

For layout and broader CSS behavior, see Documentation:Layout and CSS. If the generated view does not meet your requirements, use Documentation:UIOverride or Documentation:Turnkey session 9: View Override rather than changing generated markup directly.

Contents