> For the complete documentation index, see [llms.txt](https://tina-hammar.gitbook.io/tall-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tina-hammar.gitbook.io/tall-forms/field/fields/select.md).

# Select & Multiselect

{% tabs %}
{% tab title="Preview" %}
![](https://github.com/tanthammar/tall-forms/wiki/select.png)
{% endtab %}

{% tab title="Component" %}
The options can be `callable` or associative/flat `array`

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

### Select

Does **not** use `@entangle`.

```php
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.

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

{% endtab %}

{% tab title="Headless Select" %}
 `value` is a `string` 

Livewire example

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

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

{% endtab %}

{% tab title="Headless Multiselect" %}
&#x20;`value` is an `array`

Livewire example

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

```markup
<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')"
/>
```

{% endtab %}

{% tab title="Styling" %}

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

//or extend the blade class
```

{% endtab %}
{% endtabs %}

## 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.