IBM logo

Element	Property	Color token
Field	background	`$field` *
	border-bottom	`$border-strong` *
Inline select	background	transparent
Label	text color	`$text-secondary`
Field text	text color	`$text-primary`
Helper text	text color	`$text-helper`
Icon	fill	`$icon-primary`

* Denotes a contextual color token that will change values based on the layer it is placed on

State	Element	Property	Color token
Hover	Field	background-color	`$field-hover` *
Focus	Field	border	`$focus`
Invalid	Field	border	`$support-error`
	Error message	text-color	`$text-error`
	Error icon	fill	`$support-error`
Warning	Warning message	text-color	`$text-primary`
	Warning icon	fill	`$support-warning`
Disabled	Field	background-color	`$field` *
		border-bottom (default)	transparent
		border-bottom (fluid)	`$border-subtle` *
	Label	text-color	`$text-disabled`
	Input text	text-color	`$text-disabled`
	Chevron icon	fill	`$icon-disabled`
Read-only	Field	background-color (default)	transparent
		background-color (fluid)	`$field` *
		border-bottom	`$border-subtle` *
	Label	text-color	`$text-secondary`
	Input text	text-color (default)	`$text-primary`
		text-color (fluid)	`$text-secondary`
	Chevron icon	fill	`$icon-disable`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Select text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. Select text should be three words or less.

Element	Font-size (px/rem)	Font-weight	Type token
Label	12 / 0.75	Regular / 400	`$label-01`
Field text	14 / 0.875	Regular / 400	`$body-compact-01`
Helper text	12 / 0.75	Regular / 400	`$helper-text`
Warning message	12 / 0.75	Regular / 400	`$label-01`
Error message	12 / 0.75	Regular / 400	`$label-01`

Element	Property	px / rem	Spacing token
Label	margin-bottom	8 / 0.5	`$spacing-03`
Input text	padding-left	16 / 1	`$spacing-05`
Helper text	margin-top	4 / 0.25	`$spacing-02`
Field	padding-left	16 / 1	`$spacing-05`
	padding-right	48 / 3	`$spacing-09`
	border-bottom	1px	–
Chevron icon	padding-left, padding-right	16 / 1	`$spacing-05`
State icon	padding-left, padding-right	16 / 1	`$spacing-05`

Structure and spacing measurements for default select | px / rem

Element	Property	px / rem	Spacing token
Input text	padding-left	16 / 1	`$spacing-05`
	padding-right	8 / 0.5	`$spacing-03`
Chevron icon	padding-right	16 / 1	`$spacing-05`
	padding-left	8 / 0.5	`$spacing-03`

Structure and spacing measurements for default inline select | px / rem

Element	Property	px / rem	Spacing token
Label	margin-bottom	4 / .25	`$spacing-02`
Input text	padding-left	16 / 1	`$spacing-05`
Helper text	margin-top	4 / .25	`$spacing-02`
Field	padding-left	16 / 1	`$spacing-05`
	padding-right	48 / 3	`$spacing-09`
	border-bottom	1px	–
Chevron icon	padding-left, padding-right	16 / 1	`$spacing-05`
State icon	padding-left, padding-right	16 / 1	`$spacing-05`

Structure and spacing measurements for fluid select | px / rem

Element	Size	Height (px / rem)
Field	Extra small (xs)	24 / 1.5
	Small (sm)	32 / 2
	Medium (md)	40 / 2.5
	Large (lg)	48 / 3

Sizes for default select: extra small, small, medium, and large | px / rem

Sizes for default inline select: extra small, small, medium, large | px / rem

Element	Size	Height (px / rem)
Field	Default	64 / 4

Size for fluid select | px / rem

The following are the unique styles applied to the components when the AI label is present. Unless specified, all other tokens in the components remain the same as the non-AI variants.

For more information on the AI style elements, see the Carbon for AI guidelines.

Element	Property	Token / Size
Linear-gradient	start	`$ai-aura-start-sm`
	stop	`$ai-aura-stop`
Field	border-bottom	`$ai-border-strong`
	background color	`$field` *
AI label	size	mini

* Denotes a contextual color token that will change values based on the layer it is placed on.

Structure and spacing measurements for default select with AI

Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.

Select

Color

Interactive states

Typography

Structure

Default select

Default inline select

Fluid select

Size

Default select

Fluid select

AI presence

Feedback