Left align Radio Card

[Alasdair McLeay]

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? 😄

[Vlad Moroz]

The alignment choice is by design:

• 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)).