Back to overview

Input and selection

Text input

Text input  

Text input spacing

  • Vertical spacing (A): 0.5 rem
  • Height (B): 4 rem
  • Width: variable
  • Protected area at the bottom (C): 1.5 rem
  • Protected area on the right and left (d): 1 rem
  • Frame: 0.1 rem

Text that is too long for the area is cropped. The font is based on FontDefault. It covers one line.

In the Normal state the text input field has the color ColorBright for the background and ColorBorder for the frame.

Checkbox

Checked, NormalUnchecked, NormalChecked, ActiveUnchecked, Active
Checked, NormalUnchecked, NormalChecked, ActiveChecked, Active
FontFontClickableFontClickableFontClickable HighlightFontClickable Highlight
Checkbox  

Checkbox spacing

  • Width (a): variable
  • Height (B): 5 rem
  • Icon height and width (C): 2.4 rem
  • Protected area at the top and bottom (D): 1.25 rem
  • Lower label spacing (E): 2 rem
  • Spacing between icon and label (f): 0.5 rem

The checkbox label must not wrap around.

In the Normal state the font is based on FontClickable and in the Active state on FontClickableHighlight. The line height is not defined, as text can only cover one line.

The checkbox uses icons as resources.

List elements

List element  

List element spacing

List elements are combined to form a list, e.g., in order to display search results. The action that is triggered is defined by the application.

The icon on the right-hand side is optional.

  • Width (a): variable
  • Height (B): 5 rem
  • Protected area at the top (C): 1.9 rem
  • Protected area at the bottom (D): 2.05 rem
  • Upper and lower icon spacing (E): 1.3 rem
  • Left icon spacing (f): 2 rem
  • Icon height and width (G): 2.4 rem
  • Height of dividing line (H): 0.05 rem


Text input can only cover one line; the line height of the font is therefore not defined. In the Normal state the font is based on FontClickable and in the Active state on FontClickableHighlight.


Colors

  • Background: ColorBright
  • Dividing line: ColorRule

Radio button

Checked, Normal Unchecked, NormalChecked, ActiveUnchecked, Active
Checked, NormalUnchecked, NormalChecked, ActiveUnchecked, Active
FontFontClickableFontClickableFontClickable HighlightFontClickable Highlight
Radio button  

Radio button spacing

  • Width (a): variable
  • Height (B): 5 rem
  • Icon height and width (C): 2.4 rem
  • Protected area at the top and bottom (D): 1.25 rem
  • Lower label spacing (E): 2 rem
  • Spacing between icon and label (f): 0.5 rem

The label must not wrap around.

In the Normal state the font is based on FontClickable and in the Active state on FontClickableHighlight. The line height is not defined, as text can only cover one line.

The radio button uses icons as resources.

Range input

Range input  

Range input spacing

  • Width (a): variable
  • Height (B): 4 rem
  • Upper and lower track spacing (C): 1.8 rem
  • Thumb height and width (D): 1.6 rem
  • Track height (E): 0.4 rem
  • Upper and lower thumb spacing (F): 1.2 rem

The vertical alignment of the thumb is centered with the track. Horizontally, the thumb cannot exceed the dimensions of the element. The lowest value is reached when the left-hand border of the thumb reaches the left-hand border of the track.

The track colors and the color gradient of the thumb change according to the state:

  • Normal
    • Thumb: top gradient ColorBlueGreen, bottom #07982
    • Track: ColorTrackBase
  • Active
    • Thumb: top gradient #07982, bottom ColorBlueGreen
    • Track: ColorRule

Switch

Switch  

Switch spacing

  • Width (a): variable
  • Height (B): 6 rem
  • Spacing between label and base (c): 1.5 rem
  • Width of base (d): 6.5 rem
  • Height of base (E): 2.4 rem
  • Corner radius of base: 0.2 rem
  • Base frame: 0.05 rem
  • Button width (f): 3.2 rem
  • Button height (G): 2.6 rem
  • Button corner radius: 0.2 rem
  • Button frame: 0.05 rem
  • Vertical spacing (H): 1.7 rem

The button sits vertically centered on the base. The label sits vertically centered with the base. The label must not wrap around.

In the Normal state the font is based on FontClickable and in the Active state on FontClickableHighlight. The line height is not defined, as text can only cover one line.

 


 

StateElementDescriptionColor value
Enabled or Active, UncheckedBaseBackgroundColorSoftBackground
Enabled or Active, CheckedBaseBackgroundColorBlueGreenHighlight
Enabled or Active, Checked or UncheckedBaseFrameColorRule
Enabled, Checked or UncheckedButtonBackground: upper border gradientColorBright, position: 0%
Enabled, Checked or UncheckedButtonBackground: lower border gradientColorLightBackground, position: 100%
Active, Checked or UncheckedButtonBackground: upper border gradientColorSoftBackground, position: 0%
Active, Checked or UncheckedButtonBackground: lower border gradientColorBright, position: 100%
Enabled or Active, Checked or UncheckedButtonFrame#787C7F

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect

This website uses cookies, by continuing to browse, you agree to our cookie policy. Read our privacy policy for more information.

Close