Skip to content

Added support for left-aligned radio cards#2657

Open
joelstein wants to merge 3 commits into
livewire:mainfrom
joelstein:feature/left-aligned-radio-cards
Open

Added support for left-aligned radio cards#2657
joelstein wants to merge 3 commits into
livewire:mainfrom
joelstein:feature/left-aligned-radio-cards

Conversation

@joelstein

Copy link
Copy Markdown

The scenario

Users are accustomed to radio buttons with the indicator on the left. I'd like the ability to easily use this convention.

The problem

The indicator prop does not currently support left or start.

The solution

I extended the radio cards variant's indicator prop to accept a position. start/left render the indicator on the left side of the card, while end/right/true keep the existing right-aligned default, and false continues to hide it. The position can be set per card or on the group (inherited via @aware).

Screenshot 2026-06-16 at 7 38 59 AM

Fixes #2654.

Extended the radio "cards" variant's "indicator" prop to accept a
position. "start"/"left" render the indicator on the left side of the
card, while "end"/"right"/true keep the existing right-aligned default
and false continues to hide it. The position can be set per card or on
the group (inherited via @AWare).
@ghabriel25

Copy link
Copy Markdown
Contributor

Hi @joelstein Have you try this with Blaze enabled?

@joelstein

Copy link
Copy Markdown
Author

@ghabriel25 Yes, I tested it with Blaze enabled, and it works correctly.

@joshhanley joshhanley left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@joelstein thanks for the PR! There was one small issue where $indicator was no longer being treated as truthy, like the original implemention had. So I've updated it to support that. Otherwise, all looks good to me.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@calebporzio

Copy link
Copy Markdown
Contributor

Reviewed — indicator="start" (with left as an alias) matches how flux:switch handles its align prop, and since the indicator is placed by DOM order it flips correctly in RTL. Josh's truthiness fix covers the back-compat cases. Pushed a one-word spelling fix (behaviour → behavior) to match the codebase. Follow-up for us: mirror this on checkbox.cards so the two card variants stay in sync, and document the new accepted values.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants