Input Fields

Text Input

Text inputs allow the user to enter and edit text. The fields may have a label on the top or left side, an optional icon on the far right. Help or validation text can appear at the bottom when additional clarification is needed.

height: 72px;

width: 298px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Label position

height: 104px;

width: 233px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 104px;

width: 203px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Sizes

height: 98px;

width: 174px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 98px;

width: 174px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 98px;

width: 174px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Required field

height: 52px;

width: 249px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Validation text

height: 88px;

width: 265px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

States

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 60px;

width: 360px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Text Area

The text area input is used for long-form text with multiple lines.

height: 110px;

width: 304px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Label position

height: 151px;

width: 253px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 151px;

width: 266px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Text area filled

height: 90px;

width: 304px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Disabled

height: 90px;

width: 304px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Combo Box

The combo box or select input combines an input field with a dropdown menu. Visit the menu component for more details.

height: 72px;

width: 233px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Open menu

height: 184px;

width: 233px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Closed and selected

height: 52px;

width: 233px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Disabled

height: 52px;

width: 233px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates