robsontenorio / mary

Laravel Blade UI Components for Livewire 3
https://mary-ui.com
Other
990 stars 117 forks source link

Radio: add `null` option #487

Closed ryanvelbon closed 3 months ago

ryanvelbon commented 3 months ago

Could be useful if the Radio component had a property for allowing a null option which doesn't need to be explicitly passed into the :options property.

This would be useful for creating filter options in an index page.

Example 1

Instead of:

@php
    $subjectOptions = Subject::all();
    $subjectOptions->prepend(['name' => 'All Subjects', 'id' => null]);
@endphp

<x-radio :options="$subjectOptions" wire:model.live="subjectId" />

We could do something like this:

@php
    $subjectOptions = Subject::all();
@endphp

<x-radio :options="$subjectOptions" wire:model.live="subjectId" null-option="All Subjects" />

image

Example 2

Here is another example but with an Enum instead:

namespace App\Enums;

enum UserSex: string
{
    case Male = 'm';
    case Female = 'f';
}

Instead of

@php
    $sexOptions = UserSex::cases();
    $sexOptions[] = ['name' => 'Any', 'value' => null];
@endphp

<x-radio label="Gender" :options="$sexOptions" option-value="value" wire:model.live="sex" />

We could do something like this:

@php
    $sexOptions = UserSex::cases();
@endphp

<x-radio label="Gender" :options="$sexOptions" option-value="value" wire:model.live="sex" null-option="Any" />

image

robsontenorio commented 3 months ago

Unfortunately this approach does not work well. The "null" option does not keep selected when clicked. Am I missing something?

So it can be confusing for users.

robsontenorio commented 3 months ago

Do you intend to rework it ?