FE - Implement Reusable Checkbox Component

[ansopedia]

Description:

The current UI lacks a reusable checkbox component. This makes building forms and selecting options cumbersome and requires repetitive code. Implementing a dedicated checkbox component will improve code maintainability, consistency, and efficiency.

Proposed Solution:

Develop a reusable checkbox component that offers the following functionalities:

• State Management: Manages the checked state (on/off) of the checkbox.
• User Interaction: Handles user clicks or taps on the checkbox to toggle its state.
• Prop-Driven: Accepts props to configure the label text, initial checked state, and potentially other behaviors.
• Accessibility: Ensures the component is accessible for users with disabilities, following WCAG guidelines.

Figma

Folder Structure

src
  components
    ui
      Checkbox
        Checkbox.tsx
        checkbox.module.scss

Note: Try to integrate Legend State React For state management.

[Meet-Kalani]

I wanna do it!