Filament•2y ago

CheckboxList description per option?

As far as I can tell, there is no way to have a longer description for each checkbox list item. Like a ->helperText() per option. I know you can use getOptionLabelFromRecordUsing(), but that doesnt allow HtmlString() as a return option, so can format the description at all. They are going to be 1-3 sentences, so not short. Trying out something like

    public function programCheckboxes(): array
    {
        return Program::all()->map(function ($program) {
            return Checkbox::make('programs[' . $program->id . ']')
                ->label($program->full_name)
                ->helperText(function () use ($program) {
                    if ($program->description) {
                        return new HtmlString('<div class="ml-7">' . $program->description . '</div>');
                    }
                    return null;
                });
        })->toArray();
    }

    public function programCheckboxes(): array
    {
        return Program::all()->map(function ($program) {
            return Checkbox::make('programs[' . $program->id . ']')
                ->label($program->full_name)
                ->helperText(function () use ($program) {
                    if ($program->description) {
                        return new HtmlString('<div class="ml-7">' . $program->description . '</div>');
                    }
                    return null;
                });
        })->toArray();
    }

, but i need to figure out the proper way to associate that, havent figured out the proper make() for that yet. Also means I have to recreate the ->bulkToggleable() functionality as well. Maybe i just need to extend the CheckboxList component? Sorry, thinking out loud here. lol.

Solution:

well, a custom view with a hackish solution. lol

->getOptionLabelFromRecordUsing(fn(Program $record) => $record->full_name . '##' . $record->description)

->getOptionLabelFromRecordUsing(fn(Program $record) => $record->full_name . '##' . $record->description)

then in the view (amongst styling changes) ```php @php $customLabel = head(explode('##', $optionLabel));...

Jump to solution

13 Replies

awcodes•2y ago

How many checkboxes do you have?

Mark ChaneyOP•2y ago

6, don’t have control over it though

awcodes•2y ago

Ah ok, that could get very bad very fast from a UI/UX point of view. Was going to recommend toggles in one column and placeholder next to them, but I see the problem. Could still work though if can reasonably expect like 6-10 items on average.

Mark ChaneyOP•2y ago

Oh, toggles instead of checkboxes. Not a bad idea. How should I solve the associating them all to a single relationship? I know how I would do that with standard html forms, but not 100% as you could see above how it should be done in this situation

awcodes•2y ago

The layout components, grid, group section, etc all support relationships.

Mark ChaneyOP•2y ago

So the name of the field itself would just be ‘id’? I guess that’s where I’m confused

Mark ChaneyOP•2y ago

finally got a chance to work on it again, a simple custom view() on the checklist works

Solution

Mark Chaney•2y ago

well, a custom view with a hackish solution. lol

->getOptionLabelFromRecordUsing(fn(Program $record) => $record->full_name . '##' . $record->description)

->getOptionLabelFromRecordUsing(fn(Program $record) => $record->full_name . '##' . $record->description)

then in the view (amongst styling changes)

@php
    $customLabel = head(explode('##', $optionLabel));
    $customDescription = last(explode('##', $optionLabel));
@endphp

@php
    $customLabel = head(explode('##', $optionLabel));
    $customDescription = last(explode('##', $optionLabel));
@endphp

awcodes•2y ago

I think it looks good.

xy•16mo ago

hey, did you manage to conditionally mark the top one as disabled?

Mark ChaneyOP•16mo ago

@ap3716 that wasnt a goal of mine was it?

xy•16mo ago

Was just wondering as that is something Ive been trying to do and it kind of looks liked it as per your screenshot.

Mark ChaneyOP•16mo ago

thats just highlighted

Gaming

Programming

CheckboxList description per option?