I would like in radio control to distinguish selected option ?

sergeynilov commented 4 days ago

maryUI version

1.41.4

daisyUI version

^4.12.10

Livewire version

3.5

What browsers are affected?

Chrome

What happened?

In laravel 11 / livewire 3.5 / mary-ui 1.41.4 app I use radio control for bool fields :

            <x-mary-radio
                label="Active"
                :options="$form->activeCurrencyArticleSelectionItems"
                option-value="id"
                option-label="name"
                wire:model.live="form.active"
                hint="Only active currencies visible on frontend"
                class="bg-gray-100 w-64" />

and how it looks like when no selection is done : https://img001.prntscr.com/file/img001/yE7nNl7TScKK-eNHjt-2Gw.png

and when value is selected :

https://img001.prntscr.com/file/img001/w_whsGJzSBmCQA2LE1Ik3w.png

That seems not intuitively clear(imho) which value is selected now.

Also this white circle in the center of selected option seems strange-looking. Is there is a way to replace it with checked icon in the left corner of selected option ?

Actually in the docs https://mary-ui.com/docs/components/radio there are no any white circle in the center ...

Thanks!

robsontenorio commented 4 days ago

This happens because you have some extra CSS in somewhere. Inspect the html elements on browser to spot it.

Also make sure you don’t use tailwind/forms.

sergeynilov commented 4 days ago

No I have no tailwind/forms installed. I have a bit of custom css in resources/css/app.css. I commented it all - but still the same issue with whyite point.

robsontenorio / mary