F
Filament•2w ago
Martin Oscar

can getOptionLabelUsing() include html ?

Here's my current code 
 Select::make('alert')
                ->label('Alert')
                ->options([
                    'info' => '<span class="text-info-600 dark:text-info-500">Info</span>',
                    'warning' => '<span class="text-warning-600 dark:text-warning-500">Warning</span>',
                    'danger' => '<span class="text-danger-600 dark:text-danger-500">Danger</span>',
                    'success' => '<span class="text-success-600 dark:text-success-500">Success</span>',
                ])
                ->allowHtml()
 Select::make('alert')
                ->label('Alert')
                ->options([
                    'info' => '<span class="text-info-600 dark:text-info-500">Info</span>',
                    'warning' => '<span class="text-warning-600 dark:text-warning-500">Warning</span>',
                    'danger' => '<span class="text-danger-600 dark:text-danger-500">Danger</span>',
                    'success' => '<span class="text-success-600 dark:text-success-500">Success</span>',
                ])
                ->allowHtml()
And i wonder if something like that would work ? 
 Select::make('alert')
                ->label('Alert')
                ->options([
                    'info' => 'Info',
                    'warning' => 'Warning',
                    'danger' => 'Danger',
                    'success' => 'Success',
                ])
                ->getOptionLabelUsing(fn ($value, AlertBanner $alertBanner) => printf('<span class="%s">%s</span>', $alertBanner->getColorClasses($value), $value))
                ->allowHtml()
 Select::make('alert')
                ->label('Alert')
                ->options([
                    'info' => 'Info',
                    'warning' => 'Warning',
                    'danger' => 'Danger',
                    'success' => 'Success',
                ])
                ->getOptionLabelUsing(fn ($value, AlertBanner $alertBanner) => printf('<span class="%s">%s</span>', $alertBanner->getColorClasses($value), $value))
                ->allowHtml()
2 Replies
informatJonas
informatJonas•2w ago
try ->getOptionLabelUsing(fn ($value, AlertBanner $alertBanner) => new HtmlString(printf('<span class="%s">%s</span>', $alertBanner->getColorClasses($value), $value)))
Martin Oscar
Martin OscarOP•2w ago
Nope good try tho
Also had to change printf to sprintf otherwise it would complain 
Parameter #1 $html of class Illuminate\Support\HtmlString constructor expects string, int given.  
         🪪  argument.type
Parameter #1 $html of class Illuminate\Support\HtmlString constructor expects string, int given.  
         🪪  argument.type
Resulting html 
<div class="choices__list" role="listbox">
    <div id="choices--dataalert_banner_status-item-choice-1"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="1"
        data-value="info" data-select-text="" data-choice-selectable="" aria-selected="false">Info</div>
    <div id="choices--dataalert_banner_status-item-choice-2"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2"
        data-value="warning" data-select-text="" data-choice-selectable="" aria-selected="false">Warning</div>
    <div id="choices--dataalert_banner_status-item-choice-3"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3"
        data-value="danger" data-select-text="" data-choice-selectable="">Danger</div>
    <div id="choices--dataalert_banner_status-item-choice-4"
        class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option"
        data-choice="" data-id="4" data-value="success" data-select-text="" data-choice-selectable=""
        aria-selected="true">Success</div>
</div>
<div class="choices__list" role="listbox">
    <div id="choices--dataalert_banner_status-item-choice-1"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="1"
        data-value="info" data-select-text="" data-choice-selectable="" aria-selected="false">Info</div>
    <div id="choices--dataalert_banner_status-item-choice-2"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2"
        data-value="warning" data-select-text="" data-choice-selectable="" aria-selected="false">Warning</div>
    <div id="choices--dataalert_banner_status-item-choice-3"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3"
        data-value="danger" data-select-text="" data-choice-selectable="">Danger</div>
    <div id="choices--dataalert_banner_status-item-choice-4"
        class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option"
        data-choice="" data-id="4" data-value="success" data-select-text="" data-choice-selectable=""
        aria-selected="true">Success</div>
</div>
Instead of 
<div class="choices__list" role="listbox">
    <div id="choices--dataalert_banner_status-item-choice-1"
        class="choices__item choices__item--choice choices__item--selectable is-highlighted" role="option"
        data-choice="" data-id="1" data-value="info" data-select-text="" data-choice-selectable="" aria-selected="true">
        <span class="text-info-600 dark:text-info-500">Info</span></div>
    <div id="choices--dataalert_banner_status-item-choice-2"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2"
        data-value="warning" data-select-text="" data-choice-selectable=""><span
            class="text-warning-600 dark:text-warning-500">Warning</span></div>
    <div id="choices--dataalert_banner_status-item-choice-3"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3"
        data-value="danger" data-select-text="" data-choice-selectable=""><span
            class="text-danger-600 dark:text-danger-500">Danger</span></div>
    <div id="choices--dataalert_banner_status-item-choice-4"
        class="choices__item choices__item--choice is-selected choices__item--selectable" role="option" data-choice=""
        data-id="4" data-value="success" data-select-text="" data-choice-selectable=""><span
            class="text-success-600 dark:text-success-500">Success</span></div>
</div>
<div class="choices__list" role="listbox">
    <div id="choices--dataalert_banner_status-item-choice-1"
        class="choices__item choices__item--choice choices__item--selectable is-highlighted" role="option"
        data-choice="" data-id="1" data-value="info" data-select-text="" data-choice-selectable="" aria-selected="true">
        <span class="text-info-600 dark:text-info-500">Info</span></div>
    <div id="choices--dataalert_banner_status-item-choice-2"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2"
        data-value="warning" data-select-text="" data-choice-selectable=""><span
            class="text-warning-600 dark:text-warning-500">Warning</span></div>
    <div id="choices--dataalert_banner_status-item-choice-3"
        class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3"
        data-value="danger" data-select-text="" data-choice-selectable=""><span
            class="text-danger-600 dark:text-danger-500">Danger</span></div>
    <div id="choices--dataalert_banner_status-item-choice-4"
        class="choices__item choices__item--choice is-selected choices__item--selectable" role="option" data-choice=""
        data-id="4" data-value="success" data-select-text="" data-choice-selectable=""><span
            class="text-success-600 dark:text-success-500">Success</span></div>
</div>

Did you find this page helpful?