Skip to main content

Added input type and input mode options to text box

What components does this change affect?

This change affects all implementations of the text box component.

Tag Helper parameters

Added the following parameters to the turas-text-box Tag Helper:

  • input-type – specifies the HTML input type, such as number
  • input-mode – specifies the inputmode attribute, such as numeric

These options are opt-in. Existing text box implementations continue to use the default text input type unless input-type or input-mode is explicitly specified.

Example:

<turas-text-box 
     asp-for="ChiNumberToLookupWithInputMode" 
     input-type="number" 
     input-mode="numeric" 
 />

Generated HTML:

<input
    ...
    type="number"
    inputmode="numeric"
    ...
/>

Why this change was made

This change provides greater flexibility when implementing the text box component by allowing consuming applications to specify the HTML input type and inputmode where appropriate.

Benefits include:

  • greater flexibility – supports a wider range of input types, such as number
  • improved mobile experience – allows applications to specify an appropriate virtual keyboard using the HTML inputmode attribute

The new input-type and input-mode options should be used where there is a clear requirement for the corresponding native browser or mobile keyboard behaviour.

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing text box components in your application to confirm everything behaves as expected.

  • text box values continue to submit and bind to the expected model properties
  • form submission and server-side processing continue to work as expected
  • values are saved and updated correctly where applicable
  • expected browser behaviour for the selected input type
  • appropriate keyboard is displayed on supported mobile devices
  • client-side and server-side validation continue to behave as expected

Data submission

No changes are expected to form submission, model binding or data persistence as part of this update.

As part of your application checks, we recommend confirming that text box values continue to submit, bind and save as expected.

Summary

This change adds input-type and input-mode options to the text box Tag Helper, providing greater flexibility over the generated HTML input and mobile keyboard behaviour.

Existing text box implementations are not expected to be affected, but consuming teams should perform the recommended checks after updating their Design System packages.

Internal reference

Design System internal reference: 99410

Was this page helpful?