Input Field Neo Brutalism Design Using HTML, CSS, and JavaScript

on
Input Field Neo Brutalism Design Using HTML, CSS, and JavaScript

Input Field Neo Brutalism Design Using HTML, CSS, and JavaScript

Create a modern, responsive input field design in the neo-brutalist style using HTML, CSS, and JavaScript, featuring bold colors, thick borders, and heavy shadows for a raw, unpolished aesthetic. This implementation focuses on striking visuals, accessible interactions, and maintainable code, ideal for forms in web interfaces.

Prerequisites

  • Basic HTML, CSS, and JavaScript knowledge
  • A code editor (e.g., VS Code)

Part 1: Input Field Neo Brutalism Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the neo-brutalist input fields with a container, labels, and input elements.

<div class="input-container" role="group" aria-label="Neo-brutalist input fields">
    <div class="input-wrapper">
        <label for="input-primary" class="input-label">Username</label>
        <input type="text" id="input-primary" class="input-field" placeholder="Enter username" aria-label="Username input" required>
    </div>
    <div class="input-wrapper">
        <label for="input-secondary" class="input-label">Email</label>
        <input type="email" id="input-secondary" class="input-field secondary" placeholder="Enter email" aria-label="Email input" required>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the input fields and labels with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font.

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --accent-500: #f59e0b;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-neo: 4px 4px 0 var(--gray-900);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
}

.input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.input-label {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-900);
    margin-bottom: var(--spacing-xs);
}

.input-field {
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--gray-900);
    background: var(--white);
    border: 3px solid var(--gray-900);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-neo);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.input-field:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--gray-900);
}

.input-field:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
    transform: translate(2px, 2px);
}

.input-field.secondary {
    border-color: var(--accent-500);
}

.input-field.secondary:focus {
    border-color: var(--accent-500);
    box-shadow: 2px 2px 0 var(--primary-500), 0 0 0 3px var(--accent-500);
}

.input-field::placeholder {
    color: var(--gray-700);
    opacity: 0.6;
}

@media (max-width: 640px) {
    .input-container {
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .input-field {
        padding: var(--spacing-sm);
        font-size: 0.875rem;
    }

    .input-label {
        font-size: 0.875rem;
    }
}

Step 3: JavaScript Implementation (script.js)

Add JavaScript to enhance accessibility by managing focus states and providing visual feedback for user interactions.

document.addEventListener('DOMContentLoaded', () => {
    const inputFields = document.querySelectorAll('.input-field');

    inputFields.forEach(input => {
        // Add active class on focus for consistent visual feedback
        input.addEventListener('focus', () => {
            input.classList.add('active');
        });

        input.addEventListener('blur', () => {
            input.classList.remove('active');
        });

        // Keyboard support for Enter key to trigger form submission (demo)
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                input.blur(); // Simulate form submission by blurring for demo
            }
        });
    });
});

Explanation

  • Layout: Input fields are housed in a flexbox container with a white background, shadow, and rounded corners, mimicking a card. Each input wrapper contains a label and input, arranged in a column for clarity.
  • Styling: Inputs use a white background with thick black borders (3px) or orange (--accent-500 for secondary), offset shadows (--shadow-neo), and a monospace font for a neo-brutalist look. Labels are uppercase and bold, using the same font.
  • Interactivity: CSS handles hover and focus states with transform and shadow changes. JavaScript adds an `active` class on focus for consistent feedback and simulates form submission on Enter key for demo purposes.
  • Visual Feedback: Hovering shifts inputs slightly (translate(2px, 2px)) with a reduced shadow; focus changes the border color (--primary-500 or --accent-500) and adds a dual shadow (accent and primary). Placeholders are subtle but readable.
  • Responsiveness: A media query (@media (max-width: 640px)) reduces container padding, input size, and font sizes for mobile usability, maintaining the neo-brutalist aesthetic.
  • Accessibility: role="group" and aria-label on the container, plus aria-label and for attributes on labels/inputs, ensure screen reader compatibility. required attributes and keyboard support (Tab, Enter) enhance usability. High contrast ratios (4.5:1 minimum) ensure readability.
UX Tip: Neo-brutalist input fields should feel bold and tactile with heavy shadows and stark contrasts. Ensure accessibility with clear labels, ARIA attributes, and keyboard support. In production, add form validation or dynamic feedback (e.g., error states) and test readability across devices.

Accessibility Features

  • Use role="group", aria-label, and for attributes for semantic structure
  • Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
  • Support keyboard navigation with tabindex and Enter key
  • Use bold, readable typography (monospace for neo-brutalism)

Golden Rules

  • Use CSS variables for consistent theming
  • Implement bold borders and heavy shadows for neo-brutalist style
  • Ensure accessibility with ARIA and keyboard support
  • Optimize for mobile with responsive design

Conclusion

A professional neo-brutalist input field should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and JavaScript for striking input fields with primary and secondary variants, featuring heavy shadows and a monospace font. Experiment with colors, shadow offsets, or add form validation for enhanced functionality. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!

Location: Pune, Maharashtra, India

Comments

Post a Comment