Introduction

The pattern field allows to add predefined placeholders as well as free text. It should be used to define a pattern for service, process, action or dimension names as well as email subject. Optional placeholders are available to make it easy to dynamically include specific service and process group properties in the automated service name.

For input validation, please consider the validation guidelines.

Styleguide

A pattern field usually has a label, watermark and a hint. For hints and lables, please consinder the form field guidelines.

Pattern field

Watermark

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

Free text

The pattern field can have a mix of free text and placeholders.

Pattern free text

Free text

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

Coloring

The selected placeholders should be colored to differentiate between free text and placeholders. The coloring is dependent on the theme color.

Pattern field colouring
font-family: Bitstream Vera Sans Mono
font-size: 14px
color: $purple-500

Behavior

The pattern field shows suggestions without entering any text (just on click). The input field’s search behaviour does not distinguish between uppercase and lowercase characters.

There is usually a hint message below, giving instructions to the user. The input field always has a label to it. It may have a watermark in it but it is not mandatory. The suggestions dropdown is the same as our filter field dropdown.

Pattern suggestion
The dropdown panel behaves like the filter field.
Pattern refined suggestion
The suggested items can be redefined by typing.