Skip to content

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

@maximedegreve

Description

@maximedegreve

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions