Checkbox Neo Brutalism Design Using HTML, CSS, and JavaScript
Create a modern, responsive checkbox 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 form elements in web interfaces.
Prerequisites
- Basic HTML, CSS, and JavaScript knowledge
- A code editor (e.g., VS Code)
Part 1: Checkbox Neo Brutalism Design
Step 1: HTML Structure (index.html)
Create a semantic HTML structure for the neo-brutalist checkboxes with a container, input, custom checkbox, and label, wrapped in a label for accessibility.
<div class="checkbox-container" role="group" aria-label="Neo-brutalist checkboxes">
<label class="checkbox-wrapper">
<input type="checkbox" id="checkbox-primary" class="checkbox-input" aria-label="Primary checkbox">
<span class="checkbox-custom"></span>
<span class="checkbox-label">Primary Option</span>
</label>
<label class="checkbox-wrapper secondary">
<input type="checkbox" id="checkbox-secondary" class="checkbox-input" aria-label="Secondary checkbox">
<span class="checkbox-custom"></span>
<span class="checkbox-label">Secondary Option</span>
</label>
</div>
Step 2: Core CSS Implementation (styles.css)
Style the checkboxes and labels with neo-brutalist aesthetics: bold colors, thick borders, heavy shadows, and a monospace font. Include Google Fonts for consistent typography.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=IBM+Plex+Mono:wght@600&display=swap" rel="stylesheet">
: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;
}
.checkbox-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;
}
.checkbox-wrapper {
display: flex;
align-items: center;
gap: var(--spacing-sm);
cursor: pointer;
position: relative;
}
.checkbox-input {
position: absolute;
opacity: 0;
width: 20px;
height: 20px;
cursor: pointer;
z-index: 1;
}
.checkbox-custom {
display: inline-block;
width: 20px;
height: 20px;
background: var(--white);
border: 3px solid var(--gray-900);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-neo);
transition: all var(--transition);
position: relative;
flex-shrink: 0;
}
.checkbox-custom::after {
content: '';
position: absolute;
display: none;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
background-color: var(--white);
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox-input:checked ~ .checkbox-custom {
background: var(--primary-500);
transform: translate(2px, 2px);
box-shadow: 2px 2px 0 var(--gray-900);
}
.checkbox-input:checked ~ .checkbox-custom::after {
display: block;
}
.checkbox-wrapper.secondary .checkbox-input:checked ~ .checkbox-custom {
background: var(--accent-500);
}
.checkbox-input:focus ~ .checkbox-custom {
box-shadow: 2px 2px 0 var(--accent-500), 0 0 0 3px var(--primary-600);
}
.checkbox-wrapper.secondary .checkbox-input:focus ~ .checkbox-custom {
box-shadow: 2px 2px 0 var(--primary-500), 0 0 0 3px var(--accent-500);
}
.checkbox-label {
font-family: var(--font-mono);
font-size: 0.9375rem;
font-weight: 600;
text-transform: uppercase;
color: var(--gray-900);
cursor: pointer;
user-select: none;
margin-left: var(--spacing-sm);
}
@media (max-width: 640px) {
.checkbox-container {
padding: var(--spacing-md);
gap: var(--spacing-sm);
}
.checkbox-custom {
width: 16px;
height: 16px;
}
.checkbox-input {
width: 16px;
height: 16px;
}
.checkbox-custom::after {
width: 10px;
height: 10px;
}
.checkbox-label {
font-size: 0.875rem;
}
}
Step 3: JavaScript Implementation (script.js)
Add JavaScript to enhance accessibility by supporting keyboard interactions and logging state changes for demo purposes.
document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('.checkbox-input');
checkboxes.forEach(checkbox => {
// Add keyboard support for Space key to toggle checkbox
checkbox.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
checkbox.checked = !checkbox.checked;
// Trigger visual update
checkbox.dispatchEvent(new Event('change'));
}
});
// Log change for demo purposes
checkbox.addEventListener('change', () => {
console.log(`${checkbox.id} is ${checkbox.checked ? 'checked' : 'unchecked'}`);
});
});
});
Explanation
- Layout: Checkboxes are housed in a flexbox container with a white background, shadow, and rounded corners, mimicking a card. Each checkbox wrapper is a label containing a hidden input, custom checkbox span, and label text, aligned horizontally for clarity.
- Styling: Custom checkboxes use a white background with thick black borders (
3px) or orange (--accent-500for secondary), offset shadows (--shadow-neo), and a monospace font for labels. Checked states use blue (--primary-500) or orange backgrounds with a clip-path checkmark. Labels are uppercase and bold. - Interactivity: CSS handles checked and focus states with background changes, transforms, and shadows. JavaScript toggles checkboxes with the Space key and logs changes for demo purposes.
- Visual Feedback: Checking shifts the custom checkbox (
translate(2px, 2px)) with a reduced shadow and changes the background; focus adds a dual shadow (accent and primary). A clip-path checkmark (`::after`) appears on checked state. - Responsiveness: A media query (
@media (max-width: 640px)) reduces container padding, checkbox size, and font sizes for mobile usability, maintaining the neo-brutalist aesthetic. - Accessibility:
role="group"andaria-labelon the container, plusaria-labelon inputs, ensure screen reader compatibility. The label wrapper enhances clickability. Keyboard support (Tab, Space) and high contrast ratios (4.5:1 minimum) enhance usability. The monospace font is bold and readable.
UX Tip: Neo-brutalist checkboxes 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 integration, validation, or grouped checkbox logic and test readability across devices.
Accessibility Features
- Use
role="group"andaria-labelfor semantic structure - Wrap inputs in labels for enhanced clickability and accessibility
- Ensure high contrast ratios for text, borders, and backgrounds (4.5:1 minimum)
- Support keyboard navigation with Tab and Space keys
- 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 checkbox should embrace raw, bold aesthetics, provide clear user feedback, remain responsive, and follow accessibility guidelines. This solution uses HTML, CSS, and JavaScript for striking checkboxes with primary and secondary variants, featuring heavy shadows, a clip-path checkmark, and a monospace font. Experiment with colors, shadow offsets, or add features like form validation or grouped selections. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!
Comments
Post a Comment