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"/> export class DefaultInputExample { } export class DefaultInputExample { }

Mandatory input fields

In Dynatrace all displayed input fields are mandatory. Optional input fields are shown with a watermark (placeholder text) optional.

Measures

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

Usage 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

Also see form field.

Permanent hints

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

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.

Input fields live hints
x: 8px
y: 12px
Input fields live hints

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

Inline editing

See inline editor.

Input & Textarea

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

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

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 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
id string - Id of the element.
disabled boolean false Whether the element is disabled.
required boolean false Whether the input is required. Used for validation.
placeholder string - Input placeholder text.
type string text Input type of the element. See valid types above.
value string Input value of the input.
readonly boolean false Whether the input is readonly.
errorStateMatcher ErrorStateMatcher DefaultErrorStateMatcher A class used to control when error messages are shown.

Accessibility

The dtInput directive works with native <input> and <textarea> to provide an accessible experience. If there's no <dt-form-field> used or it does not contain a <dt-label>, aria-label, aria-labelledby or 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"/> <p><button dt-button (click)="isDisabled = !isDisabled">Toggle disabled</button></p> <input dtInput placeholder="Please insert text" [readonly]="isReadonly"/> <p><button dt-button (click)="isReadonly = !isReadonly">Toggle readonly</button></p> export class DisabledReadonlyInputExample { isDisabled = false; isReadonly = false; }

export class DisabledReadonlyInputExample { isDisabled = false; isReadonly = false; }

NgModel

´ Loading interactive demo...
<input dtInput required placeholder="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 NgModelInputExample { textValue = ''; }

Output: {{textValue || 'none'}}

Touched: {{ textControl.touched }}
Dirty: {{ textControl.dirty }}
Status: {{ textControl.control?.status }}

export class NgModelInputExample { textValue = ''; }

Textarea

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

Dark

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <p> <input type="text" dtInput #input placeholder="Please insert text" value="Text" /> <textarea dtInput #textarea placeholder="Please insert text">Text</textarea> </p> <button dt-button (click)="input.disabled = !input.disabled; textarea.disabled = !textarea.disabled">Toggle disabled</button> </section> export class DarkInputExample { }

export class DarkInputExample { }