Input fields

dtInput is a directive that applies styling to native <input> and <textarea> elements and allows them to work with <dt-form-field>.

<input
  type="text"
  dtInput
  placeholder="Please insert text"
  aria-label="Please insert text"
/>

<textarea
  dtInput
  placeholder="Please insert text"
  aria-label="Please insert text"
></textarea>

Imports

You have to import the DtInputModule when you want to use dtInput.

@NgModule({
  imports: [DtInputModule],
})
class MyModule {}

Initialization

The dtInput directive can be added to <input> and <textarea> elements.

All valid <input> and <textarea> attributes can be used on dtInput including ngModel and formControl. The only exception is the type attribute where not all values are possible.

Invalid input types

Inputs

Properties

Input and ngModel

The dtInput works with ngModel as shown in the following example.

<input
  dtInput
  required
  placeholder="Enter Text"
  aria-label="Enter text"
  [(ngModel)]="textValue"
  #textControl="ngModel"
/>
<p>
  Output:
  <em>{{ textValue || 'none' }}</em>
</p>
<!-- The lines below are just for the showcase, do not use this in production -->
<p>
  Touched: {{ textControl.touched }}
  <br />
  Dirty: {{ textControl.dirty }}
  <br />
  Status: {{ textControl.control?.status }}
  <br />
</p>

Dark background

Input fields can be placed on dark background.

<section class="dt-example-dark" dtTheme=":dark">
  <p>
    <input
      type="text"
      dtInput
      #input
      placeholder="Please insert text"
      value="Text"
      aria-label="Please insert text"
    />
    <textarea
      dtInput
      #textarea
      placeholder="Please insert text"
      aria-label="Please insert text"
    >
Text</textarea
    >
  </p>
  <button
    dt-button
    (click)="
          input.disabled = !input.disabled;
          textarea.disabled = !textarea.disabled
        "
  >
    Toggle disabled
  </button>
</section>

Accessibility

The dtInput directive works with native <input> and <textarea> to provide an accessible experience. If there's no <dt-form-field> used and the input does not contain a <dt-label>, aria-label or aria-labelledby attribute, it should be added. Any dt-error and dt-hint are automatically added to the input's aria-describedby list, and aria-invalid is automatically updated based on the input's validity state.

Input validation

For input validation, please consider the validation guidelines.

Hints

Input fields can be extended by hints that should help the user preventing errors. Use the form field component to combine input fields and hints.

Input fields in use

Input fields can be disabled or readonly.

<input
  dtInput
  placeholder="Please insert text"
  [disabled]="isDisabled"
  aria-label="Please insert text"
/>
<p>
  <button dt-button (click)="isDisabled = !isDisabled">Toggle disabled</button>
</p>
<input
  dtInput
  placeholder="Please insert text"
  [readonly]="isReadonly"
  aria-label="Please insert text"
/>
<p>
  <button dt-button (click)="isReadonly = !isReadonly">Toggle readonly</button>
</p>

Input values

Mandatory vs. optional input fields

In Dynatrace all displayed input fields are mandatory. If an input field is optional this is indicated by a placeholder text optional.

<form>
  <dt-form-field>
    <dt-label>Name</dt-label>
    <input
      type="text"
      dtInput
      placeholder="John Smith"
      aria-label="Please insert your full name"
    />
  </dt-form-field>
  <dt-form-field>
    <dt-label>Email address</dt-label>
    <input
      type="email"
      dtInput
      placeholder="optional, e.g. john@smith.com"
      aria-label="Please insert your email address"
    />
  </dt-form-field>
</form>

It is not possible to overwrite mandatory information with an empty field. In that case an error would appear informing the user that this action is not possible.

Saved data from previous entries

If there is saved data from a previous entry, it should always be displayed. In case of a password or other sensitive data, it should be masked. This helps the user to understand that information has already been entered.

Input fields in a form

When input fields are used in a form together with labels and buttons use the following measures. This ensures that the components have enough space to be clicked or tapped on mobile.

<form>
  <dt-form-field>
    <dt-label>Name</dt-label>
    <input
      type="text"
      dtInput
      placeholder="John Smith"
      aria-label="Please insert your full name"
    />
  </dt-form-field>
  <dt-form-field>
    <dt-label>Email address</dt-label>
    <input
      type="email"
      dtInput
      placeholder="john@smith.com"
      aria-label="Please insert your email address"
    />
  </dt-form-field>
  <button dt-button>Save</button>
</form>