Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CheckboxGroup and RadioGroup don't pair well with FormControl due to missing size variants #5311

Closed
maximedegreve opened this issue Nov 19, 2024 · 5 comments · Fixed by #5333

Comments

@maximedegreve
Copy link
Contributor

maximedegreve commented Nov 19, 2024

When using a CheckboxGroup or RadioGroup, it inherits a large heading. This doesn't align well with our other FormControl components, which typically use a medium font size and bold heading. Additionally, I couldn't find a group component/variant for Checkbox or Radio components in Figma.

The larger heading for CheckboxGroup and RadioGroup was likely intended to improve separation from the options. However, upon reviewing other design systems, a more consistent approach is to use regular styling for the options instead.

Comparison diagram showing three form designs labeled Code, Figma now, and Proposal with captions. All include a "Fruits" checkbox list for Banana, Pear, and Apple, followed by an "Other" text input field labeled Grapes. Arrows highlight hierarchy issues in "Figma now," with notes reading "Conflicting hierarchy" and "Doesn’t work well in medium size forms." The "Proposal with captions" design includes descriptive text like "Yellow and mushy" under Banana.

I also believe we are missing size variants for those components to ensure they pair well with TextInput which has 3 different sizes.

@mperrotti
Copy link
Contributor

Emily and I discussed this during the Primer patterns working session and we're on board with the proposed change.

@mperrotti
Copy link
Contributor

Feel free to assign me to this if you're triaging

@lukasoppermann
Copy link
Contributor

lukasoppermann commented Nov 21, 2024

Hey, I can take on the Figma change.

I couldn't find a group component/variant for Checkbox or Radio components in Figma.

This was on my do this, but I will tackle it now.

@lukasoppermann
Copy link
Contributor

Figma is update:

Image

@lukasoppermann lukasoppermann removed their assignment Nov 21, 2024
Copy link
Contributor

Uh oh! @lukasoppermann, the image you shared is missing helpful alt text. Check #5311 (comment).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment