Summary

InputCheckbox & InputRadio
Github issue: #903

The current SDS control icons need to be updated to use JSX elements with the new Check icon. The issue with the current implementation is that the checked checkbox is hollow, allowing the background color to show through. This causes design inconsistencies when the checkbox is placed on backgrounds other than white (in light mode) or black (in dark mode).

To resolve this, the checkbox design should be updated to feature a solid filled square with the Check icon overlayed on top. The icon’s color should dynamically adjust based on the theme to ensure consistency across different background colors.

The same changes are needed for the InputRadio component.

Checklist

• Default Story in Storybook
• LivePreview Story in Storybook
• Test Story in Storybook
• Tests written
• Variables from defaultTheme.ts used wherever possible
• If updating an existing component, depreciate flag has been used where necessary
• Chromatic build verified by @chanzuckerberg/sds-design