Create "Checkbox" for Component Library - UI

[khanhcao17]

Overview

Checkboxes can be used to turn an option on or off. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.

Background

This project is heavily reliant on the Atomic Design process. As explained by the HfLA Design System Guide for Designers, it is the simplest way to go through all the possible steps that are required for this component part.

You can also get information from the MUI website - Checkbox.

Action Items

Checkboxes can include the following (but feel free to add more as you research):

• [ ] Basic checkbox
  • [ ] Active - Checked
  • [ ] Active - Unchecked
  • [ ] Inactive - Checked
  • [ ] Inactive - Unchecked
• [ ] Checkbox with label
  • [ ] Checked
  • [ ] Unchecked
  • [ ] Inactive
  • [ ] Different placements of the label - top, bottom, start, end
• [ ] Indeterminate (can check multiple boxes with one checkbox but when only one of the multiple checkboxes are checked what does it show?)
• [ ] Form groups

Resources/Instructions

Internship Project Civic Tech Jobs HfLA Website Component Audit