UI/UX Design for Checkboxes/Inputs
- Dominant language
- JavaScript
- Stars
- 363
- Forks
- 872
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 18
Description
### Overview
How should the design of checkboxes and other inputs be throughout the site? For example: Should there be a pointer on checkbox text, or just on the checkbox itself? Maybe take a look at other input items and come up with designs for those as well?
### Action Items
- [ ] Find each page on the website that uses checkboxes/ inputs and add the list in the recourses section of this issue. Create a H4LA Figma page to work on this issue, and name it ```Checkboxes/Inputs - Issue #1398 ```.
- [ ] Confirm with development the names of the related classes and add to your Figma page.
- [ ] Determine what the current design and functionality for checkbox inputs and annotate.
What happens when...
- [ ] Hover
- [ ] Chosen
- [ ] Unchecking
- [ ] Let the design lead know if the behavior is uniform or not across the site
- [ ] Compare what you find with the documentation in the Design System that describes the intended functionality (hover over behavior, etc.) on checkboxes.
- [ ] Write a list of discrepancies in the comments below
#### Possible change carried over from this issue from a previous version
- [ ] Update the Design System examples for "Active" and "Active Hover" on the Dropdowns/filters section, since those shown are not up to date. They should reflect the design shown here: #2171
### Resources/Instructions
- [Figma - Design System](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=4532%3A444)
- [Figma Design System](https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3)
- For inspiration on how checkboxes/Inputs could be implemented for the site, maybe checkout how other sites implement their checkboxes.
- There are various checkboxes in the dropdown menus on the home page of the Hack for LA site in case you need to see how the site has them implemented: https://www.hackforla.org/
- Here is a list of web inputs in case you are considering designs for other input items: https://www.w3schools.com/html/html_form_input_types.asp
Contributor guide
Assessment
This issue has not been assessed yet.