Input Field

Skip to main content

Anatomy

Anatomy Image

Container
Prefix Slot (optional)
Label (using “default text”)
Suffix Slot (optional)

Default Values

Attribute	Token	Value
Container
Padding (Left and Right)	input-padding-x-medium	0.5rem
Padding (Top and Bottom)	input-padding-y-medium	0.5rem
Border Width	input-border-width	1px
Border Radius	input-radius	3px
Border Color	input-color-border-default	#2b659b
Background Color	input-color-background-default	#101923
Label
Font Family	font-control-body-1-font-family	'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
Font Size	font-control-body-1-font-size	1rem
Font Weight	font-control-body-1-font-weight	400
Line Height	font-control-body-1-line-height	calc(20 / 16)
Letter Spacing	font-control-body-1-letter-spacing	0.005em
Text Color	input-color-text-default	#ffffff

States

Default Input Field

Hover Input Field

Invalid Input Field

Disabled Input Field

Focus Input Field

Hover

Attribute	Token	Value
Container
Border Color	input-color-border-hover	#92cbff

Invalid

Attribute	Token	Value
Container
Border Color	input-color-border-invalid	#ff3838

Disabled

Attribute	Token	Value
Container
Opacity	opacity-disabled	40%

Focus

Attribute	Token	Value
Container
Outline	color-border-focus-default	#da9ce7
Border Width	border-width-focus-default	1px
Outline Offset	spacing-focus-default	0.125rem

Sizes

Input Size Small

Input Size Medium

Input Size Large

Small

Attribute	Token	Value
Container
Padding (Left and Right)	input-padding-x-small	0.5rem
Padding (Top and Bottom)	input-padding-y-small	0.25rem

Medium

Attribute	Token	Value
Container
Padding (Left and Right)	input-padding-x-medium	0.5rem
Padding (Top and Bottom)	input-padding-y-medium	0.5rem

Large

Attribute	Token	Value
Container
Padding (Left and Right)	input-padding-x-large	0.75rem
Padding (Top and Bottom)	input-padding-y-large	0.5rem

Variants

Input Placeholder

Placeholder Text

Attribute	Token	Value
Container
Text Color	input-color-text-placeholder	#a4abb6

Search Input

With Prefix

Attribute	Token	Value
Prefix
Dimension	input-icon-dimension	20px
Margin (Right)	input-prefix-margin-right	0.25rem
Fill Color	input-icon-color-fill-default	#4dacff

Password Input

Number Input

With Suffix

Attribute	Token	Value
Suffix
Dimension	input-icon-dimension	20px
Margin (Left)	input-suffix-margin-left	0.25rem
Fill Color	input-icon-color-fill-default	#4dacff

Feedback

Cancel