Input fields

An input field allows to enter various types of data. For input validation, please consider the validation guidelines.

´ Loading interactive demo...
<input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> export class InputDefaultExample {} <input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> export class InputDefaultExample {}

Behavior

In Dynatrace all displayed input fields are mandatory. If an input field is optional this is indicated by a placeholder text optional. 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.

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 understand that information has already been entered.

Input fields in use

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.

Input fields styleguide measures
x: 12px
y: 20px
z: 8px

Input fields in a sentence

Input fields can also be used within a sentence. It’s possible to have several of these sentences underneath each other.

Usage in a sentence
x: 20 px

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.

Permanent hints

Permanent hints are placed right or left below the input field and always visible to the user.

´ Loading interactive demo...
<dt-form-field> <input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> <dt-hint>Left hint</dt-hint> <dt-hint align="end">Right hint</dt-hint> </dt-form-field> export class FormFieldHintExample {} <dt-form-field> <input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> <dt-hint>Left hint</dt-hint> <dt-hint align="end">Right hint</dt-hint> </dt-form-field> export class FormFieldHintExample {}

Live hints

Live hints are used to help the user while typing. They appear as soon as the focus/cursor is on the input field.

Measurements for the live hint
x: 8px
y: 12px
Styling for the live hint
Font
font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700
Field
background-color: $gray-130
border: 1px solid $gray-300 //inside
border-radius: 0px 0px 3px 3px
Separator
line: 2px
color: $gray-500

Password requirements

The password requirements are a special kind of live hint. The requirements are displayed semibold and will turn to regular when the user fulfilled that requirement. Simultaneously the gray separator will turn green with every step (fulfilled requirement).

Password requirements

Password requirements success

Errors

If errors occur, they will be displayed as soon as the input loses focus or after three seconds of inactivity. If the user resolves the error the message will disappear. Find out more in our validation pattern.

´ Loading interactive demo...
<dt-form-field> <input type="text" required dtInput placeholder="Please insert text" [(ngModel)]="textValue" aria-label="Please insert text" /> <dt-error>A wild error appears</dt-error> </dt-form-field> export class FormFieldErrorExample { textValue: string; } <dt-form-field> <input type="text" required dtInput placeholder="Please insert text" [(ngModel)]="textValue" aria-label="Please insert text" /> <dt-error>A wild error appears</dt-error> </dt-form-field> export class FormFieldErrorExample { textValue: string; }

It is recommended that the error turns green after the error was fixed. This helps the user understand that his changes were successful. But this feature is not implemented yet.

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

´ Loading interactive demo...
<input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> export class InputDefaultExample {} <input type="text" dtInput placeholder="Please insert text" aria-label="Please insert text" /> export class InputDefaultExample {}

Imports

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

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

Initialization

To apply the Dynatrace input, add the dtInput attribute to the <input> and <textarea> elements.

Attributes

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

Invalid input type values are:

Invalid type(s) Description
button, image, reset, submit Use the button component instead.
checkbox Use the checkbox component instead.
file Is not (yet) supported. Maybe there will be an upload component in the future.
hidden Hidden input fields should not be a thing in a client side app. They also do not need styling.
radio Use the radio-button component instead
range Is not (yet) supported. Maybe there will be a slider/range component in the future.

Options & Properties

Name Type Default Description
@Input() id string - Id of the element.
@Input() disabled boolean false Whether the element is disabled.
@Input() required boolean false Whether the input is required. Used for validation.
@Input() placeholder string - Input placeholder text.
@Input() type string text Input type of the element. See valid types above.
@Input() value string - Input value of the input.
@Input() readonly boolean false Whether the input is readonly.
@Input() errorStateMatcher ErrorStateMatcher DefaultErrorStateMatcher A class used to control when error messages are shown.
empty() boolean - Whether the input is empty.

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.

Examples

Disabled & readonly

´ Loading interactive demo...
<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> export class InputDisabledReadonlyExample { isDisabled = false; isReadonly = false; } <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> export class InputDisabledReadonlyExample { isDisabled = false; isReadonly = false; }

NgModel

´ Loading interactive demo...
<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> export class InputNgModelExample { textValue = ''; } <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> export class InputNgModelExample { textValue = ''; }

Textarea

´ Loading interactive demo...
<textarea dtInput placeholder="Please insert text" aria-label="Please insert text" ></textarea> export class InputTextareaExample {} <textarea dtInput placeholder="Please insert text" aria-label="Please insert text" ></textarea> export class InputTextareaExample {}

Dark

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <p> <input type="text" dtInput #input placeholder="Please insert text" value="Text" aria-label="Please insert text" /> <!-- prettier-ignore --> <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> export class InputDarkExample {} <section class="dark" dtTheme=":dark"> <p> <input type="text" dtInput #input placeholder="Please insert text" value="Text" aria-label="Please insert text" /> <!-- prettier-ignore --> <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> export class InputDarkExample {}