Interactive user interfaces are everywhere. Whether you’re creating a pricing page, product selector, survey, dashboard, or settings page, you often want users to select only one option at a time.
A common example is a group of HTML boxes where:
- Clicking one box highlights it.
- Any previously selected box returns to its default appearance.
- Only one box is active at any moment.
The good news is that this behavior is simple to implement with a small amount of HTML, CSS, and JavaScript.
This guide explains everything from the ground up, making it suitable even if you’re just starting with web development.
What We Want to Achieve
Imagine four boxes displayed next to each other.
Initially:
[ Box 1 ] [ Box 2 ] [ Box 3 ] [ Box 4 ]
All boxes have the same default color.
When the user clicks Box 3:
[ Box 1 ] [ Box 2 ] [ Box 3 ] [ Box 4 ]
▲
highlighted
Only Box 3 changes color.
If the user later clicks Box 1:
[ Box 1 ] [ Box 2 ] [ Box 3 ] [ Box 4 ]
▲
highlighted
Box 3 automatically returns to its default color.
This behavior is similar to radio buttons, except you have complete freedom over the design.
Why Use Clickable Boxes?
This technique is useful in many situations.
Examples include:
- Product selection
- Subscription plans
- Color pickers
- Payment methods
- Shipping options
- Dashboard filters
- Quiz answers
- Settings menus
- Feature cards
- Mobile application interfaces
Instead of displaying traditional radio buttons, many modern websites use visually appealing cards or boxes.
How It Works
The solution uses three technologies.
HTML
HTML creates the boxes that users can click.
Each box is simply a <div> element.
Example:
<div class="box">Option 1</div>
<div class="box">Option 2</div>
<div class="box">Option 3</div>
<div class="box">Option 4</div>
Every box shares the same CSS class.
CSS
CSS controls how the boxes look.
For example:
- width
- height
- border
- background color
- hover effects
- selected color
- cursor style
You usually define two visual states:
Default
Light Gray
Selected
Blue
The selected appearance is often stored inside another CSS class.
Example:
.active
When this class is added, the box changes color automatically.
JavaScript
JavaScript controls what happens when someone clicks.
The process is simple:
- Detect which box was clicked.
- Remove the selected class from every box.
- Add the selected class to the clicked box.
This guarantees that only one box remains selected.
Step-by-Step Logic
The algorithm is very straightforward.
User clicks a box
│
▼
Find every box
│
▼
Remove "active" class
│
▼
Add "active" class
to clicked box
Only one box keeps the active styling.
Why Remove the Active Class First?
Imagine you don’t remove it.
The user clicks:
Box 1
Then:
Box 2
Then:
Box 4
Without removing previous selections, all three boxes would remain highlighted.
✓ Box 1
✓ Box 2
✓ Box 4
That usually isn’t the desired behavior.
By removing the active class first, only one selection exists.
Using CSS Classes Instead of Inline Styles
Beginners often try something like:
box.style.background = "blue";
Although this works, it’s usually better to use CSS classes.
Advantages include:
- Cleaner code
- Easier maintenance
- Better organization
- Easier design changes
- Improved scalability
Instead of changing colors directly in JavaScript, JavaScript simply changes the class.
CSS decides how that class looks.
Benefits of This Approach
This method is:
- Simple
- Fast
- Easy to understand
- Beginner-friendly
- Reusable
- Responsive
- Easy to customize
It also separates responsibilities correctly:
- HTML handles structure.
- CSS handles appearance.
- JavaScript handles behavior.
Possible Improvements
Once the basic version works, you can add more features.
For example:
Smooth animations
Fade between colors.
Hover effects
Highlight boxes when the mouse moves over them.
Icons
Display icons inside each box.
Images
Turn boxes into product cards.
Keyboard navigation
Allow users to move using the keyboard.
Mobile optimization
Increase touch targets for easier selection.
Save the selected option
Store the user’s choice in:
- Local Storage
- Cookies
- A database
- A backend API
Common Beginner Mistakes
Forgetting to remove the previous selection
Result:
Multiple highlighted boxes.
Applying styles directly in JavaScript
This makes maintenance more difficult.
Using CSS classes is generally a better practice.
Using duplicate IDs
Each HTML ID must be unique.
If many elements share the same styling, use a CSS class instead.
Forgetting to attach click events
Without click event listeners, nothing happens when users interact with the boxes.
Real-World Examples
You have probably seen this interaction in many websites:
- Selecting a payment method
- Choosing a subscription plan
- Picking a shipping option
- Selecting a product size
- Choosing a color
- Picking a theme
- Selecting an avatar
- Survey answers
- Quiz questions
- Dashboard widgets
Although the designs differ, the underlying logic is almost identical.
Performance
Even with dozens of selectable boxes, this approach is extremely efficient.
Modern browsers handle this type of interaction with ease, making it suitable for both desktop and mobile devices.
Best Practices
To build clean and maintainable code:
- Keep HTML focused on structure.
- Keep CSS responsible for styling.
- Keep JavaScript responsible for interaction.
- Use descriptive class names.
- Avoid repeating code.
- Reuse styles whenever possible.
- Test on both desktop and mobile devices.
Conclusion
Creating clickable HTML boxes that highlight only the selected option is one of the most useful interaction patterns in modern web development.
By combining HTML for structure, CSS for appearance, and JavaScript for behavior, you can create interfaces that are intuitive, responsive, and easy to maintain.
Whether you’re building a product selector, settings page, pricing comparison, or interactive dashboard, this pattern provides a clean and professional user experience while keeping your code simple and organized.
