Input
Text input with a white fill and a resting hairline ring border that darkens on hover/focus. Includes a password toggle and error states. InputField adds an animated label using the ghost-span pattern — font weight animates normal→semibold on focus without layout reflow, aligned with the input content.
InputField — labeled with weight animation
The label weight animates via font-variation-settings. An invisible ghost span at semibold reserves the advance width so the visible label can transition without shifting elements below it.
InputField — with hint
A hint line appears below the input when no error is present.
InputField — error state
Label turns red and error message replaces the hint. The ring immediately shows in content-error.
InputField — password
Forwards all Input variants including the built-in password eye toggle.
InputField — pill
Pass pill for a fully-rounded input. Useful for search bars and compact inline forms.
Input — basic
Raw input with ring-based border. Transparent at idle, hairline on hover, emphasis ring + white background on focus. No glow.
Input — with Label
Pair Input with the standalone Label component when you need more layout control.
Input — error state
Shows an error message and red ring on the input.
Input — password
Built-in visibility toggle.
Input — disabled
Disabled input with muted styling.