Multiselect

Requirements

• Tall-forms minimum: v5.2.2

Extends BaseField and Select

See Select field for additional methods

This field uses the Select field and all methods are the same. Just add multiple() to activate it.

->multiple()

Allow the user to select multiple options. Will return an array with selected values.

->custom()

Define the field as custom() to manipulate the field value and manually save the data. See Custom data page More examples can be found on the Relations wiki page.

public function saveFoo($validated_value)
{
    // the multiselect returns an array
    dd($validated_value);
}

Example

public function select()
{
    $options = ['Wifi' => 'wf', 'Bluetooth' => 'bl', 'Ethernet' => 'eth'];
    return Select::make('Select')
        ->options($options) //see Select or Relations wiki page on how to define options
        ->custom() //optional: save the data with saveFoo() event hook, see custom data page
        ->multiple()
        ->fieldWidth('w-full sm:max-w-sm')
        ->wire('wire:model.defer')// if you don't want a network request on every click in the select
        ->placeholder('Please select one or multiple options')
        ->rules(['nullable', Rule::in(collect($options)->values()->implode(','))]);
}

Blade component

<x-tall-select :field="$field" />

Styling

Extend Blade component (or override in config file)

Tanthammar\TallForms\Components\Select::class

Config options

//Select placeholders and help, applied as trans(...) or @lang(...)
'multiselect-placeholder' => 'global.multiselect_placeholder', //'Please select one or multiple options ...'
'multiselect-help' => 'global.multiselect_help', //'Press CTRL(Windows) or CMD(Mac), to select/deselect multiple options.'