gh-trabian-fluxwing-skills/skills/fluxwing-component-creator/templates/email-input.md

Email Input Field Component

A specialized input field for email addresses with built-in validation.

Default State

{{label}} *
┌─────────────────────────────────┐
│ {{value || placeholder}}       │ @
└─────────────────────────────────┘
{{helpText}}

Focus State

{{label}} *
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ {{value || placeholder}}       ┃ @
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
{{helpText}}

Valid State

{{label}} *
┌─────────────────────────────────┐
│ {{value}}                       │ ✓
└─────────────────────────────────┘
{{helpText}}

Error State

{{label}} *
┌─────────────────────────────────┐
│ {{value || placeholder}}       │ ⚠️
└─────────────────────────────────┘
❌ {{errorMessage}}

Disabled State

{{label}} *
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
│ {{value || placeholder}}       │ @
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
{{helpText}}

Variables

• label (string): The label displayed above the input field
• placeholder (string): Placeholder text for email format guidance
• value (string): Current email address value
• width (number): Input field width in characters (20-60, default 35)
• errorMessage (string): Validation error message
• helpText (string): Privacy or usage information
• isValid (boolean): Whether the current email is valid

Accessibility

• Role: textbox
• Focusable: Yes
• Input Mode: email (shows @ symbol on mobile keyboards)
• Keyboard Support:
  • Tab: Move focus to/from field
  • All text input keys: Enter email
  • @ key: Email-specific character
• ARIA:
  • aria-label: Email address input field
  • aria-required: true (email usually required)
  • aria-invalid: Set when email format is invalid
  • aria-describedby: Links to help text or error message

Usage Examples

Basic Email Input

Email Address *
┌─────────────────────────────────┐
│ name@example.com                │ @
└─────────────────────────────────┘
We'll never share your email address

With Valid Email

Work Email *
┌─────────────────────────────────┐
│ john.doe@company.com            │ ✓
└─────────────────────────────────┘
Used for account notifications

With Validation Error

Email Address *
┌─────────────────────────────────┐
│ invalid-email                   │ ⚠️
└─────────────────────────────────┘
❌ Please enter a valid email address

Registration Form

Email Address *
┌─────────────────────────────────┐
│ user@domain.co                  │ ✓
└─────────────────────────────────┘
This will be your login username

Component Behavior

Email Validation

Real-time validation checks:

1. Format: Contains @ symbol and domain
2. Structure: Basic email pattern matching
3. Domain: Has valid domain extension
4. Length: Within reasonable email limits

State Transitions

1. Default → Focus: User clicks or tabs into field
2. Focus → Typing: User starts entering email
3. Typing → Valid: Email format becomes valid
4. Typing → Error: Email format is invalid
5. Valid/Error → Default: User leaves field

Validation Timing

• Real-time: Basic format checking as user types
• On Blur: Complete validation when leaving field
• On Submit: Final validation before form submission

Design Tokens

Visual Indicators

• @ = Email input indicator
• ✓ = Valid email confirmation
• ⚠️ = Format error warning
• * = Required field indicator

Border Styles

• ┌─┐ = Default border
• ┏━┓ = Focus border (primary color)
• ┌ ─ ┐ = Disabled border (dashed)

Colors

• Default: Standard input styling
• Valid: Light green background with green border
• Error: Light red background with red border
• Focus: Primary color border

Email-Specific Features

Autocomplete Support

• Suggests common email domains
• Remembers previously entered emails
• Integration with browser autofill

Mobile Optimization

• Shows email-optimized keyboard
• Includes @ and . keys prominently
• Prevents autocorrect/autocapitalize

Privacy Considerations

• Clear privacy policy reference
• Secure handling of email data
• Optional email verification flow

Related Components

• Text Input: Base input component
• Password Input: For password entry
• Confirmation Email Input: For email verification
• Newsletter Signup: Specialized email collection

Implementation Notes

When implementing in actual UI frameworks:

1. Use type="email" for HTML5 validation
2. Set autocomplete="email" for autofill
3. Set inputmode="email" for mobile keyboards
4. Implement proper email validation regex
5. Consider email verification workflow
6. Provide clear privacy information
7. Handle international domain names
8. Support paste operations for long emails