🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Parsed/Input Controls
This page was created by PageReplicator on 2025-09-01. Last edited by PageReplicator on 2025-09-01.

Template:Notice



Helper Text[<a href="/index.php?title=Documentation:Input_Controls&veaction=edit&section=1" class="mw-editsection-visualeditor" title="Edit section: Helper Text" data-bs-title="Documentation:Input_Controls">edit</a> | <a href="/index.php?title=Documentation:Input_Controls&action=edit&section=1" title="Edit section: Helper Text" data-bs-title="Documentation:Input_Controls">edit source</a>]

Helper text conveys additional guidance about the input control, such as how it will be used. Helper text will only take up a single line below the input control and will be persistently visible.

To add Helper text to input control, create <ViewModelColumn>_HelperText column in the ViewModel Editor, where <ViewModelColumn> is the name of the column with input.

<a href="https://wiki.mdriven.net/index.php/File:Input_control_with_helper_text.png" target="_blank" rel="nofollow noreferrer noopener" data-bs-title="File:Input_control_with_helper_text.png" data-bs-filetimestamp="20210825220925"><img alt="" src="/images/thumb/a/a8/Input_control_with_helper_text.png/420px-Input_control_with_helper_text.png" decoding="async" width="420" height="79" class="thumbimage" srcset="/images/thumb/a/a8/Input_control_with_helper_text.png/630px-Input_control_with_helper_text.png 1.5x, /images/thumb/a/a8/Input_control_with_helper_text.png/840px-Input_control_with_helper_text.png 2x" /></a>
<a href="/File:Input_control_with_helper_text.png" class="internal" title="Enlarge"></a>
Input control with helper text

Placeholder[<a href="/index.php?title=Documentation:Input_Controls&veaction=edit&section=2" class="mw-editsection-visualeditor" title="Edit section: Placeholder" data-bs-title="Documentation:Input_Controls">edit</a> | <a href="/index.php?title=Documentation:Input_Controls&action=edit&section=2" title="Edit section: Placeholder" data-bs-title="Documentation:Input_Controls">edit source</a>]

Placeholder text appears in the input control when it has no value set. Placeholder can be a tip for users on how to fill up this input control.

To add Placeholder to input control, create <ViewModelColumn>_Placeholder column in the ViewModel editor, where <ViewModelColumn> is the name of the column with input.

<a href="https://wiki.mdriven.net/index.php/File:Input_control_with_placeholder.png" target="_blank" rel="nofollow noreferrer noopener" data-bs-title="File:Input_control_with_placeholder.png" data-bs-filetimestamp="20210825221321"><img alt="" src="/images/thumb/9/9e/Input_control_with_placeholder.png/422px-Input_control_with_placeholder.png" decoding="async" width="422" height="71" class="thumbimage" srcset="/images/thumb/9/9e/Input_control_with_placeholder.png/633px-Input_control_with_placeholder.png 1.5x, /images/thumb/9/9e/Input_control_with_placeholder.png/844px-Input_control_with_placeholder.png 2x" /></a>
<a href="/File:Input_control_with_placeholder.png" class="internal" title="Enlarge"></a>
Input control with placeholder

Input controls are rendered differently depending on the value type.

Please check out <a href="/Documentation:Databound_Placeholder_text" title="Documentation:Databound Placeholder text" data-bs-title="Documentation:Databound_Placeholder_text">Databound Placeholder text</a> for more information.

Text Types[<a href="/index.php?title=Documentation:Input_Controls&veaction=edit&section=3" class="mw-editsection-visualeditor" title="Edit section: Text Types" data-bs-title="Documentation:Input_Controls">edit</a> | <a href="/index.php?title=Documentation:Input_Controls&action=edit&section=3" title="Edit section: Text Types" data-bs-title="Documentation:Input_Controls">edit source</a>]

For inputs intended as type text, this type can be overridden with something else. Use the tagged value text type on the column in the ViewModel.

  • Password
  • Email
  • Tel
  • URL
  • Search

The type of browser used determines how these input types are rendered.

For further reference, look at <a target="_blank" rel="nofollow noreferrer noopener" class="external free" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password</a>

Inputs with Icons[<a href="/index.php?title=Documentation:Input_Controls&veaction=edit&section=4" class="mw-editsection-visualeditor" title="Edit section: Inputs with Icons" data-bs-title="Documentation:Input_Controls">edit</a> | <a href="/index.php?title=Documentation:Input_Controls&action=edit&section=4" title="Edit section: Inputs with Icons" data-bs-title="Documentation:Input_Controls">edit source</a>]

You can add an icon to the input control to improve the visual presentation or give users the visual indicator of which type of input control it is.

To add an icon to the input control, set TaggedValue "Icon" on ViewModelColumn. The value of the TaggedValue should be the icon name (MDriven Turnkey uses Material Icons – you can find these icon names on the <a target="_blank" rel="nofollow noreferrer noopener" class="external text" href="https://fonts.google.com/icons">Google fonts website</a>).

It is possible to choose an icon position in the input control. By default, the icon will be placed at the start of the input control (leading icon). You can change this position by setting TaggedValue "IconPosition" to "after".

<a href="https://wiki.mdriven.net/index.php/File:Input_control_with_leading_icon.png" target="_blank" rel="nofollow noreferrer noopener" data-bs-title="File:Input_control_with_leading_icon.png" data-bs-filetimestamp="20210825224331"><img alt="" src="/images/thumb/9/97/Input_control_with_leading_icon.png/460px-Input_control_with_leading_icon.png" decoding="async" width="460" height="78" class="thumbimage" srcset="/images/thumb/9/97/Input_control_with_leading_icon.png/690px-Input_control_with_leading_icon.png 1.5x, /images/thumb/9/97/Input_control_with_leading_icon.png/920px-Input_control_with_leading_icon.png 2x" /></a>
<a href="/File:Input_control_with_leading_icon.png" class="internal" title="Enlarge"></a>
Input control with leading icon
<a href="https://wiki.mdriven.net/index.php/File:Input_control_with_trailing_icon.png" target="_blank" rel="nofollow noreferrer noopener" data-bs-title="File:Input_control_with_trailing_icon.png" data-bs-filetimestamp="20210825224406"><img alt="" src="/images/thumb/9/92/Input_control_with_trailing_icon.png/459px-Input_control_with_trailing_icon.png" decoding="async" width="459" height="93" class="thumbimage" srcset="/images/thumb/9/92/Input_control_with_trailing_icon.png/689px-Input_control_with_trailing_icon.png 1.5x, /images/9/92/Input_control_with_trailing_icon.png 2x" /></a>
<a href="/File:Input_control_with_trailing_icon.png" class="internal" title="Enlarge"></a>
Input control with trailing icon
<a href="https://wiki.mdriven.net/index.php/File:Input_control_with_leading_icon_and_placeholder.png" target="_blank" rel="nofollow noreferrer noopener" data-bs-title="File:Input_control_with_leading_icon_and_placeholder.png" data-bs-filetimestamp="20210825224443"><img alt="" src="/images/thumb/1/16/Input_control_with_leading_icon_and_placeholder.png/460px-Input_control_with_leading_icon_and_placeholder.png" decoding="async" width="460" height="101" class="thumbimage" srcset="/images/thumb/1/16/Input_control_with_leading_icon_and_placeholder.png/690px-Input_control_with_leading_icon_and_placeholder.png 1.5x, /images/1/16/Input_control_with_leading_icon_and_placeholder.png 2x" /></a>
<a href="/File:Input_control_with_leading_icon_and_placeholder.png" class="internal" title="Enlarge"></a>
Input control with leading icon and placeholder