1. Go to this page and download the library: Download xylo/multiselect-two library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
xylo / multiselect-two example snippets
use Xylo\MultiselectTwo\Forms\Components\XyloMultiselectTwo;
XyloMultiselectTwo::make('menu_item_ids')
// Optional — omit both (and use hiddenLabel) if you want no title/subtitle
->label('STEP 2 · Choose the items in this program')
->helperText('A punch is earned when a customer buys any item on the right.')
->selectableLabel('Available items')
->selectedLabel('In this program')
->options([
'1' => 'Cheese Burger 6"',
'2' => 'Beef Burger',
'3' => 'Chicken Burger',
'4' => 'Veggie Burger',
'5' => 'Fish Burger',
'6' => 'Double Cheese',
'7' => 'Classic Fries',
'8' => 'Onion Rings',
])
->descriptions([
'1' => '$7.99',
'2' => '$8.99',
'3' => '$7.49',
'4' => '$6.99',
'5' => '$8.49',
'6' => '$9.99',
'7' => '$3.49',
'8' => '$4.29',
])
->barcodes([
'1' => '100100',
'2' => '100200',
'3' => '100300',
])
->skus([
'1' => 'CH-06',
'2' => 'BF-01',
])
->accentColor('#2f9e7a') // or 'natural' / 'primary' / any CSS color
->default(['2', '7']);
XyloMultiselectTwo::make('items')
->barcodeScanner()
->instantScan() // no Enter needed
->instantScanDelay(120) // idle ms before the typed code is evaluated
->instantScanMinLength(6) // ignore anything shorter
->options($items);
XyloMultiselectTwo::make('items')
->barcodeScanner()
->scanFeedbackDuration(0) // keep the result visible until the next scan
->searchOnScanMiss() // put an unresolved code into the search box
->barcodeStrict() // exact matches only (pre-1.2 behaviour)
->options($items)
->barcodes($barcodes);
// One color for everything on hover
->hoverColor('#dcfce7')
// Cards together, buttons together
->itemsHoverColor('#ecfdf5')
->buttonsHoverColor('#fef3c7')
// Fully separate
->availableHoverColor('#d1fae5')
->selectedHoverColor('#e0f2fe')
->addAllHoverColor('#bbf7d0')
->removeAllHoverColor('#fecaca')
->addAllBackgroundColor('#f3f4f6') // optional — default gray if omitted
->removeAllBackgroundColor('#ffffff') // optional — default card white if omitted
XyloMultiselectTwo::make('program_items')
->selectableLabel('Available items')
->selectedLabel('In this program')
->availableSearchPlaceholder('Search by name, SKU or barcode')
->selectedSearchPlaceholder('Filter );
->accentColor('natural') // package soft green
->accentColor('primary') // follows Filament panel primary theme
->accentColor('success') // Filament success palette
->accentColor('#0ea5e9') // any hex / CSS color