Select Divider/Separator (<hr>)

How it is possible to add a separator to a select component. With plain HTML I would add

<hr>

<hr>

<hr>

<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)

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)

toeknee•12/31/24, 3:47 PM

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

Dennis Koch•1/1/25, 2:19 PM

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

DDennis Koch Not sure whether this works for the native select, too: https://filamentphp.com/...

MonkeyPhillOP•1/4/25, 5:44 PM

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•1/5/25, 10:58 PM

You mean like tihs:

MMatthew You mean like tihs:

Dennis Koch•1/6/25, 1:09 AM

He shared a screenshot at the top

Matthew•1/6/25, 11:49 AM

But he says that isn't what he wants?

MMatthew But he says that isn't what he wants?

Dennis Koch•1/6/25, 12:01 PM

He wants the divider, but without the option wrapping it

Matthew•1/6/25, 1:42 PM

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

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

toeknee•1/6/25, 2:28 PM

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•1/6/25, 2:32 PM

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.

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

Dennis Koch•1/6/25, 2:58 PM

Where are you showing a

<hr>

<hr>

DDennis Koch Where are you showing a `<hr>`?

Matthew•1/6/25, 3:01 PM

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

MonkeyPhillOP•1/7/25, 5:20 PM

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>

<hr>

which is unpleasant and unhelpful, which is because it is wrapped in an <option><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•1/7/25, 6:08 PM

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'),
        ]);

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

MonkeyPhillOP•1/7/25, 10:34 PM

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>

<hr>

if I could get it.

awcodes•1/7/25, 10:43 PM

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•1/8/25, 1:14 PM

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.

Aawcodes Might be a good idea to reconsider your approach here. hr in selects is only par...

MonkeyPhillOP•1/8/25, 1:14 PM

Thank you for pointing out the support for hr - I didn’t realise how poor it was in some places.

Matthew•1/8/25, 4:22 PM

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

Toggle buttons - Form Builder - Filament

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

MonkeyPhillOP•1/8/25, 8:47 PM

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

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?

MonkeyPhillOP•1/8/25, 8:55 PM

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•1/8/25, 11:58 PM

Logically it can’t be null, true or false. You’re trying to do a ternary against a Boolean.

awcodes•1/9/25, 12:00 AM

Why not just do a radio with ‘no preference ’ as null and the true false.

awcodes•1/9/25, 12:01 AM

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.

Aawcodes Why not just do a radio with ‘no preference ’ as null and the true false.

MonkeyPhillOP•1/9/25, 9:06 AM

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.

Aawcodes Only real way to do this with a select would be to target the nth option in the ...

MonkeyPhillOP•1/9/25, 9:14 AM

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;
}

MMonkeyPhill Do you know how well option borders are supported by browsers? I tried targeting...

Dennis Koch•1/9/25, 3:40 PM

Styling selectselects is a mess.

Select Divider/Separator (<hr>)

Similar Threads

Similar Threads

Similar Threads