Spryker

Input

Single-line text input for forms, search, and data entry.

We'll never share your email.

Variants

Each variant communicates a different validation state. Pair error with a message that explains how to fix the issue.

VariantPurpose
DefaultResting state for all form inputs. Use for every field that hasn't yet been validated or flagged.
ErrorValidation has failed. Always include a clear, specific error message explaining how to correct the value.
SuccessUse sparingly — only when confirmation of a valid value adds value (e.g. username availability).

Design tokens

TokenValueDescription
input/background/default
#ffffff
Default background
input/background/disabled
#f5f5f5
Disabled background
input/border/default
#aeaeae
Default border
input/border/hover
#656565
Hover border
input/border/focus
#318272
Focus border
input/border/error
#bc1700
Error border
input/text/value
#3b3b3d
Entered value
input/text/placeholder
#8f8f8f
Placeholder text
focus/ring
rgba(51, 130, 114, 0.35)
Focus ring shadow
radius/sm
4px
Corner radius

Guidelines

Do
  • Pair every input with a visible label
  • Use helper text for format hints (e.g. MM/DD/YYYY)
  • Show error messages that explain how to fix the issue
  • Use the correct input type (email, tel, number)
  • Mark required fields consistently with an asterisk
Don't
  • Use placeholder text as a substitute for a label
  • Show error state before the user has interacted
  • Use generic messages like "Invalid input"
  • Disable inputs without explaining why
  • Rely on colour alone to communicate errors
ButtonTextarea