[Component] Checkbox

[natalia-fitzgerald]

Checkbox

Tracking the design and development lifecycle of the checkbox component.

Related links:

• https://cfpb.github.io/design-system/components/buttons
• https://cfpb.github.io/design-system/development/variables#buttons
• https://cfpb.github.io/design-stories/?path=/docs/components-button--docs

Effort level: Large

(Levels: Small, Medium, Large, Extra Large)

Definition of ready

Checklist

• [X] The component has an identified use case (one of the 3 options below)
• [X] The current state of the component has been identified (one of the 3 options below)
• [X] The task is broken into steps

Definition of ready questionnaire:

Identify the use case:

• [X] Small business lending filing platform
• [ ] Metro 2 tool
• [ ] No identified project need but does exist in the CFPB Design System

Identify the current state:

• [X] The component already exist in the CFPB Design System

  • Build an exact React translation of the CFPB Design System component
  • Build the component in Figma (if it is not already included in the CFPB Design System template)

• [ ] The component does not exist in the CFPB Design System but does exist on cf.gov

  • Conduct a design audit of any component variations that exist on our website (if applicable)
  • Determine final design
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

• [ ] The component does not exist in the CFPB Design System or on cf.gov (but has an identified use case and is being tracked as part of the SBL or M2 work)

  • Design the component as a part of the SBL or Metro 2 project work
  • Build the component in Figma (if it is not already included in the CFPB Design System template)
  • Add the component to UI component library
  • Incorporate the component into the CFPB Design System or alert the CFPB Design System maintainers that this component will need to be added.

Indicate which types we will include in the React component library.

Types

• [X] Standard checkboxes

  • [x] Default
  • [x] Focused
  • [x] Selected
  • [x] Hover
  • [x] Disabled
  • [x] Disabled selected

• [X] Large target area checkboxes

  • [x] Default
  • [x] Focused
  • [x] Selected
  • [x] Hover
  • [x] Disabled

Definition of done

Component is fully functional

• [ ] Visual regression testing has been conducted
• [ ] All interactive states are accounted for and incorporated
• [ ] The component is successfully integrated into the Small business lending filing platform (or prototype) or other CFPB web app

Accessibility checks have been completed

• [ ] Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• [ ] Component is screen reader friendly
• [ ] Component does not introduce new errors or warnings in WAVE

For existing components:

• [ ] React component visually and functionally matches the CFPB Design System component
• [ ] Visual regression testing has been conducted and component has passed all tests
• [ ] Manual visual review has been conducted and component has passed this review
• [ ] Storybook page includes all types and variations of the component that are included in the CFPB Design System

For new components:

• [ ] The CFPB Design System maintainers have been alerted that there is a new component that must be added to the system OR
• [ ] We have added the new components to the CFPB Design System
• [ ] Documentation has been written and is included in Storybook and/or the CFPB Design System

Final sign off

• [ ] The component has been reviewed and approved by UI, UX, and FEWD

[natalia-fitzgerald]

Content updates:

• [x] For consistency with the Design System use the same labeling, casing, etc. where possible
• [x] For consistency with the Design System change the title to "Checkboxes"
• [x] Change all title case to sentence case (global change)
  • For example: "Default checkbox" instead of "Default Checkbox"
  • "Checkbox with Helper" instead of "Checkbox with helper"
• [x] Change "Large Checkbox" to "Large target area checkboxes"
• [x] Remove in page guidelines content and instead link to the CFPB Design System page for Checkboxes "View guidelines for the checkbox component in the CFPB Design System"

Things to check:

• [x] Check on use cases for "Checkbox with helper" and "Large checkbox with helper". Is there a known use case for our project or on the cf.gov?

[meissadia]

@natalia-fitzgerald

Indicate which types we will include in the React component library.

Should each of these types be a separate story (demonstration of how to create it)? Or a separate component (a reusable implementation of this variant)? Or do we want to display them all in a single story similar to the way they are grouped in the CFPB DS?

[meissadia]

Separate issue to change Story names to sentence case to other components.

https://github.com/cfpb/design-stories/issues/156

[natalia-fitzgerald]

@meissadia Below is a checklist of Design System checklist components. In the Design System they are grouped as types and then by states.

Type: Standard checkboxes States: Default, Focused, Selected, Hover, Disabled, Disabled selected

Type: Large target area checkboxes States: Default, Focused, Selected, Hover, Disabled

I'm not sure why the large target area checkbox in the Design System live code doesn't show a Disabled selected state. I think this is an error in the live text code block because I see code for it in the HTML. So I'm going to assume we should include it in our library. I added it to the list below.

I don't know where we should incorporate the checkbox with helper text or large target checkbox with helper text. Maybe we should create a Fieldset component instead (like what's in the Design System)? There's also something called a form group. There are a number of ways we can handle this so maybe we can use this component as an example and I can post the possible approaches we can take.

Types

Standard checkboxes

• [x] Default
• [x] Focused
• [x] Selected
• [x] Hover
• [x] Disabled
• [x] Disabled selected

Large target area checkboxes

• [x] Default
• [x] Focused
• [x] Selected
• [x] Hover
• [x] Disabled selected

[natalia-fitzgerald]

@meissadia In thinking about how we should organize and group content like checkboxes we should review/discuss the following specific examples. I will post more here as I review.

Carbon

Guidelines: https://carbondesignsystem.com/components/checkbox/usage/ Storybook: https://react.carbondesignsystem.com/?path=/docs/components-checkbox--overview

UK.gov

Guidelines: https://design-system.service.gov.uk/components/checkboxes/ Storybook: https://govuk-react.github.io/govuk-react/?path=/story/checkbox--default

VA

Guidelines: https://design.va.gov/components/form/checkbox Storybook: https://design.va.gov/storybook/?path=/docs/components-va-checkbox--default Storybook: https://design.va.gov/storybook/?path=/docs/components-va-checkbox-group--default

USWDS

Guidelines: https://designsystem.digital.gov/components/checkbox/ Storybook: https://trussworks.github.io/react-uswds/?path=/story/components-checkbox--default-checkbox

CFPB

Guidelines: https://cfpb.github.io/design-system/components/checkboxes Storybook: https://cfpb.github.io/design-stories/?path=/docs/components-checkbox--overview

[meissadia]

I think I like the USWDS Checkbox best with the Carbon version a close runner-up, but maybe because they're most similar to our current implementation.

It makes sense to me to have the Checkbox w/ Helper text alongside the other Checkbox variations so that users looking for what is possible with the Checkbox component have a full overview, without having to visit multiple sections of the site.

We should also show the Checkbox usage in the Fieldset section as a demonstration of how to combine the Checkbox components into more common Form input patterns. We can also add links between the Fieldset/Checkbox pages to help users grasp the difference between the two.

[natalia-fitzgerald]

@meissadia The USWDS Checkbox organization looks clear to me. I think it's fine to include the Checkbox with helper text in the Checkbox section. I am not aware of any actual use cases for that variation on our website but that's ok I guess.

It looks like the USWDS has a section called "Form components" and "Fieldsets" is a subsection of that. Would you want to organize things that way?

[meissadia]

It looks like the USWDS has a section called "Form components" and "Fieldsets" is a subsection of that. Would you want to organize things that way?

@natalia-fitzgerald That works for me, plus it aligns with the way the CFPB DS organizes them: Components > Form Elements > Fieldsets

Sidenote: PR https://github.com/cfpb/design-system-react/pull/163 adds the Disabled selected states mentioned above and fixes some styling issues with the focus/hover variants.

[natalia-fitzgerald]

This component has been verified. I am closing this issue.