Input

Professional form input fields with LYD brand styling, validation states, and premium features for the luxury real estate segment.

Input Types

Basic Input

Standard text input field

Maximum 100 characters

Input with Icon

Input field with leading icon

Search Input

Input with search functionality

Password Input

Secure password field

Number Input

Numeric input with formatting

€

Premium Input

Luxury gradient border effect

Validation States

Error State

Invalid input indication

Please enter a valid email address

Success State

Valid input confirmation

✓ Valid phone number

Disabled State

Non-interactive input

Auto-generated ID

Input Sizes

Size Variations

Different input sizes for various use cases

Real Estate Use Cases

Property Search

to

Contact Form

Implementation Guide

HTML Implementation

<!-- Basic Input -->
<label class="lyd-input-label">Property Name</label>
<input type="text" class="lyd-input" placeholder="Enter property name">
<div class="lyd-input-helper">Maximum 100 characters</div>

<!-- Input with Icon -->
<div class="lyd-input-wrapper has-icon">
    <svg class="lyd-input-icon" viewBox="0 0 24 24">
        <path d="M20 4H4c-1.1 0-1.99...">
    </svg>
    <input type="email" class="lyd-input" placeholder="Email">
</div>

<!-- Input Group -->
<div class="lyd-input-group">
    <span class="lyd-input-addon">€</span>
    <input type="number" class="lyd-input" placeholder="Price">
</div>

React/Next.js Component

import React, { useState } from 'react';

interface InputProps {
    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'search';
    label?: string;
    placeholder?: string;
    value?: string;
    error?: string;
    helper?: string;
    required?: boolean;
    disabled?: boolean;
    icon?: React.ReactNode;
    size?: 'small' | 'default' | 'large';
    variant?: 'default' | 'premium';
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export const Input: React.FC<InputProps> = ({
    type = 'text',
    label,
    placeholder,
    value,
    error,
    helper,
    required = false,
    disabled = false,
    icon,
    size = 'default',
    variant = 'default',
    onChange
}) => {
    const [focused, setFocused] = useState(false);
    
    const inputClasses = [
        'lyd-input',
        size !== 'default' && size,
        variant === 'premium' && 'premium',
        error && 'error',
        value && !error && 'success'
    ].filter(Boolean).join(' ');
    
    return (
        <div className="lyd-input-field">
            {label && (
                <label className={`lyd-input-label ${required ? 'required' : ''}`}>
                    {label}
                </label>
            )}
            
            <div className={`lyd-input-wrapper ${icon ? 'has-icon' : ''}`}>
                {icon && <span className="lyd-input-icon">{icon}</span>}
                <input
                    type={type}
                    className={inputClasses}
                    placeholder={placeholder}
                    value={value}
                    disabled={disabled}
                    onChange={onChange}
                    onFocus={() => setFocused(true)}
                    onBlur={() => setFocused(false)}
                />
            </div>
            
            {error && <div className="lyd-input-error">{error}</div>}
            {helper && !error && <div className="lyd-input-helper">{helper}</div>}
        </div>
    );
};

JavaScript Validation

// Real-time validation
function validateInput(input, type) {
    const value = input.value.trim();
    let isValid = true;
    let message = '';
    
    switch(type) {
        case 'email':
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            isValid = emailRegex.test(value);
            message = isValid ? '' : 'Please enter a valid email';
            break;
            
        case 'phone':
            const phoneRegex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
            isValid = phoneRegex.test(value);
            message = isValid ? '' : 'Please enter a valid phone number';
            break;
            
        case 'required':
            isValid = value.length > 0;
            message = isValid ? '' : 'This field is required';
            break;
    }
    
    // Update UI
    if (isValid) {
        input.classList.remove('error');
        input.classList.add('success');
    } else {
        input.classList.add('error');
        input.classList.remove('success');
    }
    
    // Update error message
    const errorEl = input.parentElement.nextElementSibling;
    if (errorEl && errorEl.classList.contains('lyd-input-error')) {
        errorEl.textContent = message;
    }
    
    return isValid;
}

// Format number inputs
function formatCurrency(input) {
    let value = input.value.replace(/[^\d]/g, '');
    value = new Intl.NumberFormat('de-DE').format(value);
    input.value = value;
}

API Reference

Class Description Usage
.lyd-input Base input class Required on all inputs
.lyd-input-wrapper Container for input with icons Wrap input when using icons
.lyd-input-label Input label styling Labels above inputs
.lyd-input-helper Helper text below input Additional information
.lyd-input-error Error message styling Validation errors
.lyd-input-group Group multiple inputs Price ranges, etc.
.lyd-input-addon Addon for input groups Currency symbols, units
.error Error state modifier Invalid inputs
.success Success state modifier Valid inputs
.premium Premium variant Luxury sections
.small Small size modifier Compact forms
.large Large size modifier Hero sections

Accessibility & Best Practices

Accessibility Guidelines

  • Always use <label> elements with inputs
  • Provide clear placeholder text
  • Include helper text for complex fields
  • Use proper input types (email, tel, number)
  • Ensure keyboard navigation works
  • Add aria-describedby for error messages
  • Mark required fields clearly
  • Maintain WCAG AA contrast ratios

LYD Brand Guidelines

  • Use LYD border colors for focus states
  • Apply subtle shadows on focus
  • Keep consistent input heights (44px default)
  • Use system fonts for better readability
  • Group related fields logically
  • Provide real-time validation feedback
  • Use icons to enhance understanding
  • Format numbers and currencies appropriately