Input fields

input fields input edit

Introduction

View in Groundhog

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

Styleguide

Elements

Input fields styleguide elements

Input fields styleguide elements

Label

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-700

Label on dark bg

font-family: Bernina Sans Regular
font-size: 12px
color: #fff

Input text

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700

Watermark

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-500

Field

height: 32px
background-color: #fff
border: 1px solid $gray-300 //inside
border-radius: 3px

Measures

Input fields styleguide measures

x: 12px
y: 20px
z: 8px

Hover state

Input fields hover

Input fields hover

border: 1px solid $gray-400 //inside

Disabled state on light background

Input fields disabled on light background

Input

color: $gray-300

Field

background-color: $gray-130
border: 1px solid $gray-300 //inside

Disabled state on dark background

Input fields disabled on dark background

Input

color: $gray-400

Field

background-color: $gray-500
border: 1px solid $gray-400 //inside

Mandatory input fields

In Dynatrace all displayed input fields are mandatory. Optional input fields are shown with a watermark optional.

Input fields optional

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-500

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: 20px

Hints

Permanent hints

Hints are used for in context help e.g. to indicate which type of data is valid.

Input fields permanent hints

Input fields permanent hints

x: 8px

Hint on light background

font-family: Bernina Sans Regular
font-size: 12px
color: $gray-500

Hint on dark background

font-family: Bernina Sans Regular
font-size: 12px
color: $fff

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

Input fields live hints

x: 8px
y: 12px

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

Inline editing is indicated by the edit icon used in the nested button next to the editable text.

Inline editing

Confirmation of the input

The checkmark icon and abort icon used in the nested button save/discard the changes. While the cursor is in the input field, the enter key triggers saving it. On focus loss of the inline editing input field, the typed input will be autosaved.

Inline editing confirmation

x: 2px