Skip to main content

Input Fields

Input fields should feel native and comfortable, following platform conventions while maintaining BookWish's calm, bookish aesthetic.

General Guidelines​

  • Use platform-native input styling where possible
  • Maintain consistent padding and spacing with the 4-point grid
  • Ensure forms inherit the same typography and spacing rules
  • Avoid tiny input fields or dense layouts

Typography​

Input fields should use:

  • Label text: AppTypography.labelSmall (14pt, w500, sans-serif)
  • Input text: AppTypography.body (16pt, w400, sans-serif)
  • Helper text: AppTypography.caption (12pt, w400, sans-serif, 60% opacity)

Spacing​

  • Field height: Minimum 44–48 pt for touch targets
  • Inner padding: 12–16 pt horizontal, 12 pt vertical
  • Vertical spacing between fields: 16–24 pt

States​

Default​

  • Border: 1px Border color (#E0D7C8)
  • Background: white or very light Parchment variant

Focus​

  • Border: 2px Teal Edge (#4BB4C8)
  • Background: white

Error​

  • Border: 2px Error color (#C44545)
  • Helper text: Error color (#C44545)

Disabled​

  • Background: Light gray/parchment
  • Text: Reduced opacity (40%)

Field Types​

Text Input​

Standard single-line text entry

Text Area​

Multi-line text entry for longer content

  • Minimum 3–4 rows visible
  • Expandable if needed

Select/Dropdown​

Platform-native pickers preferred

  • Clear visual indication of current selection

Checkout Forms​

For checkout and payment forms:

  • Left-align labels above fields
  • Group related fields (e.g., shipping address)
  • Maintain generous spacing
  • No marketing banners or distractions
  • Clear field validation on blur