TextInput

States

State	Supported	Visual change	Token / attribute
Default	Yes	raised surface, 1 px input border	color-surface-raised, color-border-input
Hover	Yes	No visual change in this version	None
Focused	Yes	Box border turns to the focus colour; a 2 px focus outline is drawn 2 px outside the box (focus-within)	color-border-focus, color-focus-ring, border-width-focus; data-focused
Filled	Yes	No visual change	data-filled
Invalid	Yes	Border turns to the danger colour with a 2 px danger halo around it; the error message shows	color-border-danger, color-status-danger-background, color-text-danger; data-invalid (via error or invalid)
Invalid and focused	Yes	The focus border and ring replace the invalid border; the error message stays visible	color-border-focus, color-focus-ring; data-invalid, data-focused
Disabled	Yes	Surface, border and text switch to the disabled colours; the cursor shows “not allowed”	color-surface-disabled, color-border-disabled, color-text-disabled; data-disabled
Read-only	Yes	No visual change; it takes focus and its value is submitted	data-readonly
Required	Yes	The label gets a * marker	color-text-danger; data-required

Measurements

Measurement	Value	Token
Height, sm	32 px	input-height-sm
Height, md	36 px; 44 px on touch	input-height-md
Height, lg	40 px; 48 px on touch	input-height-lg
Inline padding	12 px	input-padding-inline (space-lg)
Corner radius	10 px	input-radius (radius-lg)
Gap between label, box, help text and error	4 px	space-xs
Gap between start content, input and end content	6 px	space-sm
Border	1 px	None (fixed)
Focus ring	2 px	border-width-focus
Label type	label-md	text-label-md
Value type	body-md	text-body-md
Help and error text type	body-sm	text-body-sm

Sizes sm, md and lg match the Button sizes of the same name (32, 36 and 40 px); side by side on one row they line up.

Tokens

Values follow the selected brand; you can change the brand in the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-color-border-input		#8c8c8c#8c8c8c#8c8c8c	#737373#737373#737373
--bigbang-color-border-focus		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-border-danger		#c14347#c14347#c14347	#ff9a97#ff9a97#ff9a97
--bigbang-color-border-disabled		#e5e5e5#e5e5e5#e5e5e5	#404040#404040#404040
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-surface-disabled		#f5f5f5#f5f5f5#f5f5f5	#303030#303030#303030
--bigbang-color-text-default		#171717#171717#171717	#fafafa#fafafa#fafafa
--bigbang-color-text-placeholder		#737373#737373#737373	#a1a1a1#a1a1a1#a1a1a1
--bigbang-color-text-subtle		#404040#404040#404040	#d4d4d4#d4d4d4#d4d4d4
--bigbang-color-text-danger		#a6383c#a6383c#a6383c	#ffbebb#ffbebb#ffbebb
--bigbang-color-text-disabled		#a1a1a1#a1a1a1#a1a1a1	#525252#525252#525252
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-input-height-md		36px36px36px	36px36px36px
--bigbang-input-height-lg		40px40px40px	40px40px40px
--bigbang-input-padding-inline		12px12px12px	12px12px12px
--bigbang-input-radius		10px10px10px	10px10px10px
--bigbang-space-xs		4px4px4px	4px4px4px
--bigbang-space-sm		6px6px6px	6px6px6px
--bigbang-border-width-focus		2px2px2px	2px2px2px
--bigbang-duration-fast		0.11s0.11s0.11s	0.11s0.11s0.11s
--bigbang-easing-productive		cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)	cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)cubic-bezier(0.2, 0, 0.38, 0.9)

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Focus, invalid and disabled colours	Border, background and text colour (motion.field)	motion-focus-duration (110 ms)	motion-focus-easing	Unchanged; it is only a colour change
Focus ring	None	Drawn instantly	None	Unchanged
Hover and press	None	No motion	None	No motion
Error message enter	opacity and a 4 px drop (motion.fieldMessage); no shake	motion-collapsible-duration (150 ms)	motion-collapsible-easing	Distance becomes 0; the text only fades in

Every value comes from tokens; see the Motion foundation page.