Nested Checkboxes I Challenge

Problem Description

Create a Nested Checkboxes component that allows users to:

• Select multiple nested checkboxes in a hierarchical structure
• Display the selected items in a readable format below the checkboxes
• Show the current selection state clearly

Requirements

• The component should display a hierarchical structure of items with checkboxes
• Visual indentation should clearly show the nesting level of each item
• The component should handle any depth of nesting
• Implement proper accessibility with ARIA roles and properties
• Visual styling should distinguish between parent and child items
• The selected items should be displayed in a readable format below the checkboxes

Example Component Usage

Here's how to use the NestedCheckboxes component in your React application:

Props

• items: Array of items with nested structure
• selectedPaths: Set of selected paths (e.g., "Fruits/Apples")
• onSelect: Callback function that receives the updated set of selected paths

Type Definitions

This is only an example of how the component could be implemented. Feel free to design it however you prefer as long as it meets the requirements.

Steps to solve

1. Start with a single-level checkbox implementation and test it
2. Expand to handle two-level parent-child relationships and test the new behaviors
3. Scale to n-level nesting
4. Add final touches (accessibility, styling, selection display)
5. Verify against the example data
6. Test your solution against the provided unit tests or write your own!

Bonus

• When a parent is selected, all its children should be selected
• When some children are selected, the parent should show unchecked state
• When all children are selected, the parent should show a selected state
• Write unit tests covering:
  • Individual checkbox selection
  • Parent-child relationship behavior
  • Selection state propagation

Getting Started

You can create a new project or use our CLI tool to use the starter template.

First Time Setup

Start Working

Solution

To view the reference solution:

How to Review Your Solution

• axe-core is pre-integrated in the starter template. To use it:

1. Open your browser's Developer Tools (F12)
2. Check the Console tab while using your app
3. Review and fix accessibility errors that appear (ignore minor errors)

• Test your app with keyboard to ensure full keyboard navigation (if applicable)

• Add ARIA labels to make your app understandable by screen readers

• Use Claude for a final accessibility & quality check.

  Example Prompt for Claude:

  Then paste your code..

How to Share Your Solution

If you used the CLI tool

1. Fork the frontend-challenges repository
2. Add your fork as a new remote to your existing solution:

3. Open a pull request (PR) from your fork to the main repository.

If you started from scratch

1. Fork the frontend-challenges repository and clone it
2. Navigate to the solution directory:

3. Add your solution files in this directory
4. Push your changes to your fork
5. Open a pull request (PR) to contribute your solution

Need help?

• Follow this guide to making a pull request to an open-source project
• OR, create an issue at frontend-challenges