Filament•2mo ago

Select Divider/Separator (<hr>)

How it is possible to add a separator to a select component. With plain HTML I would add <hr> but if I try to do that here then an extra blank option is added to the list. The code below produces the screenshot attached.

Components\Select::make('invites')
    ->options([
        'default' => 'Default (On)',
        '<hr>',
        'on' => 'On',
        'off' => 'Off',
    ])
    ->allowHtml()
    ->selectablePlaceholder(false)

Components\Select::make('invites')
    ->options([
        'default' => 'Default (On)',
        '<hr>',
        'on' => 'On',
        'off' => 'Off',
    ])
    ->allowHtml()
    ->selectablePlaceholder(false)

22 Replies

toeknee•2mo ago

Just format label state with a html wrapper if the element is first.

Dennis Koch•2mo ago

Not sure whether this works for the native select, too: https://filamentphp.com/docs/3.x/forms/fields/select#grouping-options

Select - Form Builder - Filament

MonkeyPhillOP•2mo ago

Thanks - the grouping works, but it provides a heading rather than a divider. I just want a better way to distinguish a default or current value from all the others.

Matthew•2mo ago

You mean like tihs:

Dennis Koch•2mo ago

He shared a screenshot at the top 😅

Matthew•2mo ago

But he says that isn't what he wants?

Dennis Koch•2mo ago

He wants the divider, but without the option wrapping it

Matthew•2mo ago

I'm confused, isn't that what I have shown..sort of.

toeknee•2mo ago

It is, but Denis pointed out he shared the screenshot of what he wanted. I suspect he was making sure you read the full thread as you wouldn't ask that if you had.

Matthew•2mo ago

No, you're wrong, and ironically in a manner that suggests you haven't read the thread. He shared a screenshot of what he had got, not what he wanted. I knew that, as I had read the whole thread. I'm asking...is this what you want instead ? If the OP answers in the affirmative, I'll update with the code.

Dennis Koch•2mo ago

Where are you showing a <hr>?

Matthew•2mo ago

I'm not, but mostly achieving the original brief, hence: '...sort of'

MonkeyPhillOP•5w ago

I don’t know why I’m not getting notifications here, so sorry for my slow reply. The screenshot I shared initially has a blank entry above the <hr> which is unpleasant and unhelpful, which is because it is wrapped in an <option>. I would like a way to add the divider without the option. A disabled option with a bunch of -‘s isn’t as pretty (or semantic), but it may have to do the job.

Matthew•5w ago

It's almost as hacky as that...it is actually using groups:

        return new Collection([
            '' => $countries->where('co_common', true)->pluck('co_name', 'co_iso'),
            '-------------------------' => $countries->where('co_common', false)->pluck('co_name', 'co_iso'),
        ]);

MonkeyPhillOP•5w ago

Thanks, I'll give it a go and see how I feel when I click around with it. I feel I'd probably still prefer a real <hr> if I could get it.

awcodes•5w ago

Might be a good idea to reconsider your approach here. hr in selects is only partially supported with no full support in any browser. https://caniuse.com/mdn-html_elements_hr_hr_in_select Personally, I feel this should be a checkbox or toggle to be semantically aligned with the Boolean nature of the data.

MonkeyPhillOP•5w ago

This particular option has 3 states, so a single checkbox or toggle wouldn’t work. Radio, select or similar. In the same form, I have options with more than 2 non-default options too which I would prefer to be visually similar. Thank you for pointing out the support for hr - I didn’t realise how poor it was in some places.

Matthew•4w ago

You want toggle buttons: https://filamentphp.com/docs/3.x/forms/fields/toggle-buttons

Toggle buttons - Form Builder - Filament

MonkeyPhillOP•4w ago

Since I asked this question I ended up using a select and setting the placeholder text for my 'Default' option so that I could move on for a bit. This seemed to make sense since default value is actually null; the On/Off options are nullable booleans; and anything else is a nullable string BackedEnum. Toggle buttons handle booleans and enums really well, but they don't have any way for me to handle null. If I write out the options by hand, including a null option, it doesn't get shown as selected when the form is loaded (but it does save ok). It also loses the magic enum handling (HasLabel, HasColor, HasIcon). Am I missing something? Is there a way to deselect a toggle button, or handle null values?

Components\ToggleButtons::make('option-1')
    ->boolean(), // pretty, but does not handle null
Components\ToggleButtons::make('option-2')
    ->boolean()
    ->nullable(), // exactly the same as option-1
Components\ToggleButtons::make('option-3')
    ->options([
        null => 'Default (On)', // saves, but is not selected on load
        true => 'On', // may need to add colors & icons
        false => 'Off',
    ]),
Components\ToggleButtons::make('option-4')
    // pretty; handles labels, colors and icons from enum class;
    // but does not handle null and cannot be deselected.
    ->options(CommentNotificationOption::class),

Components\ToggleButtons::make('option-1')
    ->boolean(), // pretty, but does not handle null
Components\ToggleButtons::make('option-2')
    ->boolean()
    ->nullable(), // exactly the same as option-1
Components\ToggleButtons::make('option-3')
    ->options([
        null => 'Default (On)', // saves, but is not selected on load
        true => 'On', // may need to add colors & icons
        false => 'Off',
    ]),
Components\ToggleButtons::make('option-4')
    // pretty; handles labels, colors and icons from enum class;
    // but does not handle null and cannot be deselected.
    ->options(CommentNotificationOption::class),

awcodes•4w ago

Logically it can’t be null, true or false. You’re trying to do a ternary against a Boolean. Why not just do a radio with ‘no preference ’ as null and the true false. Only real way to do this with a select would be to target the nth option in the select with css and apply a border top to it.

MonkeyPhillOP•4w ago

It seems that Radio has the same issues as ToggleButtons - if I change option-3 above to Radio then the null option is not selected on load but does save if chosen. I can explore mutating the null option to another value. If I want to use Radio or ToggleButtons for an enum value then I will also need to convert the enum into an options list by hand so that I can add the null value ahead of it. It seems a lot of work for something that the select does quite easily with a placeholder. Do you know how well option borders are supported by browsers? I tried targeting an empty value, which the developer tools seem to think has worked, but I can't see any border.

option[value=""] {
    border-bottom: 1px solid black;
}

option[value=""] {
    border-bottom: 1px solid black;
}

Dennis Koch•4w ago

Styling selects is a mess.

Gaming

Programming

Select Divider/Separator (<hr>)

Did you find this page helpful?