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;
