You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
By default the alignment of contents within a checkbox/radio card is centered.
If the intention is to support left alignment of text in a checkbox/radio card item, could it be given a prop to set this, rather than requiring nesting a Flex within it?
If the intention is to discourage left alignment, could the example at the top of the docs be changed to something centre aligned? 😄
The text was updated successfully, but these errors were encountered:
penx
changed the title
Left align Checkbox Card
Left align Checkbox and Radio Card
May 2, 2024
vladmoroz
changed the title
Left align Checkbox and Radio Card
Left align Radio Card
May 6, 2024
The checkbox card is left aligned by default because of the checkbox on the right.
The radio card was made center aligned by default because it's the most vanilla / good-looking option out of the box for simple one-liners.
That Flex example in the docs should probably be moved to the Examples section, and the base example should be simpler.
Using composition to achieve a different layout is encouraged. Not sure how we'd feel about a layout prop there as some common layouts are just too different and can't be covered with props reasonably well compared to composition (namely: a single center-aligned line of text (works out of the box), text + icon horizontally (works out of the box), 2+ lines of text left-aligned (needs composition)).
In the first example for the Checkbox Card and Radio Card in the docs, the text is left aligned because it has a Flex child that sets this.
https://www.radix-ui.com/themes/docs/components/checkbox-cards
https://www.radix-ui.com/themes/docs/components/radio-cards
By default the alignment of contents within a checkbox/radio card is centered.
If the intention is to support left alignment of text in a checkbox/radio card item, could it be given a prop to set this, rather than requiring nesting a Flex within it?
If the intention is to discourage left alignment, could the example at the top of the docs be changed to something centre aligned? 😄
The text was updated successfully, but these errors were encountered: