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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tina-hammar.gitbook.io/tall-forms/field/fields/select.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.