Photo by Leopold Stenger on Unsplash

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

Create a modern, responsive text 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 multi-line text input with striking visuals, accessible interactions, and maintainable code, ideal for forms in web interfaces.

Comment

Feedback

Prerequisites

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

Part 1: Text Field Neo Brutalism Design

Step 1: HTML Structure (index.html)

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

<div class="text-field-container" role="group" aria-label="Neo-brutalist text fields">
    <div class="text-field-wrapper">
        <label for="text-field-primary" class="text-field-label">Comment</label>
        <textarea id="text-field-primary" class="text-field" placeholder="Enter your comment" aria-label="Comment text field" required></textarea>
    </div>
    <div class="text-field-wrapper">
        <label for="text-field-secondary" class="text-field-label">Feedback</label>
        <textarea id="text-field-secondary" class="text-field secondary" placeholder="Enter your feedback" aria-label="Feedback text field" required></textarea>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the text 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;
}

.text-field-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;
}

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

.text-field-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);
}

.text-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-colors var(--transition);
    resize: vertical;
    min-height: 80px;
    line-height: 1.4;
}

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

.text-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);
}

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

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

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

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

    .text-field {
        padding: var(--spacing-sm);
        font-size: 0.875rem;
        min-height: 60px;
    }

    .text-field-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 textFields = document.querySelectorAll('.text-field');

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

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

        // Keyboard support for Ctrl+Enter to simulate form submission (demo)
        field.addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                e.preventDefault();
                field.blur(); // Simulate form submission by blurring for demo
            }
        });
    });
});

Explanation

• Layout: Text fields (textareas) are housed in a flexbox container with a white background, shadow, and rounded corners, mimicking a card. Each wrapper contains a label and textarea, arranged in a column for clarity.
• Styling: Textareas 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. The `resize: vertical` allows height adjustment.
• 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 Ctrl+Enter for demo purposes.
• Visual Feedback: Hovering shifts textareas 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, textarea 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/textareas, ensure screen reader compatibility. required attributes enforce form validation. Keyboard support (Tab, Ctrl+Enter) and high contrast ratios (4.5:1 minimum) ensure usability. The monospace font is bold and readable.

UX Tip: Neo-brutalist text 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, character limits, 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 Ctrl+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 text 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 multi-line text fields with primary and secondary variants, featuring heavy shadows and a monospace font. Experiment with colors, shadow offsets, or add features like character counters or validation for enhanced functionality. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!