Select & Multiselect

Preview

Component

The options can be callable or associative/flat array

$options = ['Wifi' => 'wf', 'Bluetooth' => 'bl', 'Ethernet' => 'eth'];
$options = ['Wifi', 'Bluetooth', 'Ethernet'];

Select

Does not use @entangle.

Select::make('Select')
    ->options($options)
    ->default('wf')
    ->fieldWidth('w-full sm:max-w-sm')
    ->wire('defer')// if you don't want a network request on every selection
    ->rules(['nullable', Rule::in(array_values($options))]);

Multiselect

Uses @entangle. Is deferred by default.

MultiSelect::make('Multi Select')
    ->options($options)
    ->default(['wf'])
    ->deferEntangle(false)//remove if you want the field to be deferred
    ->fieldWidth('w-full sm:max-w-sm')
    ->wire('defer')// if you don't want a network request on every selection
    ->rules(['nullable', Rule::in(collect($options)->values()->implode(','))]);

Headless Select

value is a string

Livewire example

public null|string $select = 'bl';
public array $options = ['wf' => 'Wifi', 'bl' => 'Bluetooth', 'eth' => 'Ethernet'];

<x-tall-select 
    :field="Select::blade('select')
    ->options($options)
    ->default('wf')
    ->fieldWidth('w-full sm:max-w-sm')"
/>

Headless Multiselect

value is an array

Livewire example

public array $multiselect = ['bl'];
public array $options = ['wf' => 'Wifi', 'bl' => 'Bluetooth', 'eth' => 'Ethernet'];

<x-tall-multiselect 
    :field="MultiSelect::blade('multiselect')
    ->options(['Wifi' => 'wf', 'Bluetooth' => 'bl', 'Ethernet' => 'eth'])
    ->custom() //save the data with saveFoo() event hook
    ->default(['wf'])
    ->fieldWidth('w-full sm:max-w-sm')"
/>

Styling

//tall-theme.css
.form-select
.form-multiselect

//or extend the blade class

Methods

->options($options)

• A list or flat key => value based Array, Collection or Closure.

• OBSERVE: if you use a callable, it will be executed on EVERY re-render of the component! Maybe you should consider setting the $options in mount() instead?

• Tip: use a component method that returns an array; ->options($this->someMethod())

->placeholder(string $placeholder)

Display a message when no item is selected.